0
我想建立一个网站，响应与使用引导。但是，正如你所看到的那样，它绝对不是响应式的。试图使我的网站响应使用bootstrap。不能得到它的工作
一个显而易见的问题是，只要我缩小浏览器窗口的大小，文本就会脱离它们所在的div。当我这样做的时候，我的图像也奇怪地叠起来了。
我知道它一团糟，但我希望有人能指导我一点。我没有要求提供完整的指南来纠正每个元素。
问候，
乔纳斯
html, body {
\t height: 100%;
\t width: 100%;
}
body{
color: white;
}
.container {
\t margin: 0 10px 0;
}
header {
\t background-color: #0f1011;
\t height: 100%;
}
header .top {
\t height: 18%;
}
.top h1 span {
\t color: #fff;
}
.top p {
\t color: #fff;
\t letter-spacing: 2px;
}
.top ul li {
\t display: inline;
\t padding-left: 10px;
}
.top ul li a {
\t color: #fff;
}
.top ul li a:hover {
\t border-bottom: 2px solid #fff;
}
.top ul {
\t list-style-type: none;
}
input[type=text] {
width: 130px;
box-sizing: border-box;
height: 5px;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
margin-top: 20px;
}
header .centerImage {
\t height: 60%;
\t position: relative;
\t background-color: #9ca4af;
}
.centerImage img {
\t display: block;
\t margin: 0;
\t position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
header .sloganAndSocial {
\t height: 22%;
}
.sloganAndSocial h4 {
\t float: right;
}
.contentSection {
\t background-color: #fff;
\t height: 100%;
}
.contentSection aside {
\t background-color: #d5d9e0;
\t background: -webkit-linear-gradient(#d5d9e0, #fff); /* For Safari 5.1 to 6.0 */
\t background: -o-linear-gradient(#d5d9e0, #fff); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#d5d9e0, #fff); /* For Firefox 3.6 to 15 */
background: linear-gradient(#d5d9e0, #fff); /* Standard syntax */
\t float: right;
\t height: 100%;
\t padding: 46px;
}
aside h3 {
\t padding: 10px 0 7px 0;
}
aside .sideInfo {
\t padding-bottom: 10px;
}
.sponsors {
\t background-color: #d5dded;
\t height: 70%;
}
.sponsers img {
\t margin: 6px 3px;
}
footer {
\t background-color: black;
\t color: #fff;
\t height: 70%;
}
footer p {
\t line-height: 180%;
}
footer h3 {
\t padding-bottom: 15px;
}
footer p span {
\t color: #b5b5b5;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NORDIC BARISTACUB</title>
<link rel="stylesheet" href="css/main.css" type="text/css" >
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="top">
<div class="container">
<div class="row">
<div class="col-md-5">
<h1><span>NORDIC </span>BARISTACUP</h1>
</div>
<div class="col-md-2 col-md-offset-5">
<form><input type="text" name="search" placeholder="Search.."></form>
</div>
</div>
<div class="row">
<div class="col-md-5">
<p>be together act together learn together</p>
</div>
<div class="col-md-6 col-md-offset-1">
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">2011 EVENT</a></li>
<li><a href="#">NORDIC ROASTER</a></li>
<li><a href="#">RESULTS</a></li>
<li><a href="#">LINKS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="centerImage">
<img src="img/coffeecup.jpg" alt="bo!"/>
</div>
<div class="sloganAndSocial">
<div class="container">
<div class="col-md-7">
<h3>"To create an environment in which knowledge<br>about coffee and its sphere can be obtained</h3>
</div>
<div class="col-md-4 col-md-offset-1">
<h4>Social icons coming here!</h4>
</div>
</div>
</div>
</header>
<div class="contentSection">
<div class="articles">
<aside>
<div class="sideInfo">
<h3>NBC Shop</h3>
<p>Your shopping cart is empty</p>
<p><a href="#">Visit the shop</a></p>
</div>
<div class="sideInfo">
<h3>Next Event</h3>
<p>NORDIC BARISTA CUP 2011<br>
Copenhagen, Denmark<br>
Dates : 25th - 27th August 2011<br>
Theme : SENSORY</p>
<p><a href="#">Sign up now</a></p>
</div>
<div class="sideInfo">
<h3>Scoreboard</h3>
<table>
<tr>
<th>List of winners from past years</th>
</tr>
<tr>
<td>2011</td><td>?</td>
</tr>
<tr>
<td>2010</td><td>Sweden</td>
</tr>
<tr>
<td>2009</td><td>Denmark</td>
</tr>
<tr>
<td>2007</td><td>Sweden</td>
</tr>
<tr>
<td>2006</td><td>Norway</td>
</tr>
<tr>
<td>2005</td><td>Norway</td>
</tr>
<tr>
<td>2004</td><td>Denmark</td>
</tr>
</table>
</div>
</aside>
</div>
</div>
<div class="sponsors">
<div class="container">
<div class="row">
<h3>Nordic Barista Cup Sponsors</h3>
</div>
<div class="row">
<div class="col-md-2">
<img src="img/coffeecup.jpg" alt="bo!" width="130" height="90" />
</div>
<div class="col-md-2">
<img src="img/coffeecup.jpg" alt="bo!" width="130" height="90" />
</div>
<div class="col-md-2">
<img src="img/coffeecup.jpg" alt="bo!" width="130" height="90" /> </div>
<div class="col-md-2">
<img src="img/coffeecup.jpg" alt="bo!" width="130" height="90" />
</div>
<div class="col-md-2">
<img src="img/coffeecup.jpg" alt="bo!" width="130" height="90" />
</div>
<div class="col-md-2">
<img src="img/coffeecup.jpg" alt="bo!" width="130" height="90" />
</div>
</div>
<div class="row">
<div class="col-md-2">
<img src="img/coffeecup.jpg" alt="bo!" width="130" height="90" />
</div>
<div class="col-md-2">
<img src="img/coffeecup.jpg" alt="bo!" width="130" height="90" />
</div>
<div class="col-md-2">
<img src="img/coffeecup.jpg" alt="bo!" width="130" height="90" />
</div>
<div class="col-md-2">
<img src="img/coffeecup.jpg" alt="bo!" width="130" height="90" />
</div>
<div class="col-md-2">
<img src="img/coffeecup.jpg" alt="bo!" width="130" height="90" />
</div>
<div class="col-md-2">
<img src="img/coffeecup.jpg" alt="bo!" width="130" height="90" />
</div>
</div>
<div class="row">
<div class="col-md-2">
<img src="img/coffeecup.jpg" alt="bo!" width="130" height="90" />
</div>
<div class="col-md-2">
<img src="img/coffeecup.jpg" alt="bo!" width="130" height="90" />
</div>
<div class="col-md-2">
<img src="img/coffeecup.jpg" alt="bo!" width="130" height="90" />
</div>
<div class="col-md-2">
<img src="img/coffeecup.jpg" alt="bo!" width="130" height="90" />
</div>
<div class="col-md-2">
<img src="img/coffeecup.jpg" alt="bo!" width="130" height="90" />
</div>
<div class="col-md-2">
<img src="img/coffeecup.jpg" alt="bo!" width="130" height="90" />
</div>
</div>
<div class="row">
<div class="col-md-2">
<img src="img/coffeecup.jpg" alt="bo!" width="130" height="90" />
</div>
<div class="col-md-2">
<img src="img/coffeecup.jpg" alt="bo!" width="130" height="90" />
</div>
<div class="col-md-2">
<img src="img/coffeecup.jpg" alt="bo!" width="130" height="90" />
</div>
<div class="col-md-2">
<img src="img/coffeecup.jpg" alt="bo!" width="130" height="90" />
</div>
<div class="col-md-2">
</div>
<div class="col-md-2">
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid" id="footerH">
<div class="col-md-4">
<h3>About Nordic Barista</h3>
<p>The vision within the Nordic Barista Cup is:<br><br><span>"To create an environment in which knowledge about coffee and its sphere can be obtained"</span><br><br>
'...create an environment...'<br>
Combined with personally absorption having the oportunity to see and experience countries, people, traditions etc. will always serve as a source of inspiration in our daily work.<br>
The organization behind the Nordic Barista Cup see it as its main purpose to be a part of creating this forum in which people can meet, bond and achieve further knowledge.
</p>
</div>
<div class="col-md-4">
<h3>NBC Flickr Stream</h3>
<div class="container-fluid">
<div class="row">
<div class="col-md-1">
<img src="img/coffeecup.jpg" alt="bo!" width="80" height="80" />
</div>
<div class="col-md-1">
<img src="img/coffeecup.jpg" alt="bo!" width="80" height="80" />
</div>
<div class="col-md-1">
<img src="img/coffeecup.jpg" alt="bo!" width="80" height="80" />
</div>
</div>
<div class="row">
<div class="col-md-1">
<img src="img/coffeecup.jpg" alt="bo!" width="80" height="80" />
</div>
<div class="col-md-1">
<img src="img/coffeecup.jpg" alt="bo!" width="80" height="80" />
</div>
<div class="col-md-1">
<img src="img/coffeecup.jpg" alt="bo!" width="80" height="80" />
</div>
</div>
<div class="row">
<div class="col-md-1">
<img src="img/coffeecup.jpg" alt="bo!" width="80" height="80" />
</div>
<div class="col-md-1">
<img src="img/coffeecup.jpg" alt="bo!" width="80" height="80" />
</div>
<div class="col-md-1">
<img src="img/coffeecup.jpg" alt="bo!" width="80" height="80" />
</div>
</div>
</div>
</div>
<div class="col-md-4">
<h3>Contact</h3>
<p>Nordic Barista Cup<br><b></b>
<span>?????????<br>
1160 Copenhagen K<br>
555 555 555<br>
CVR: 555555<br>
Email: [email protected]</span></p>
</div>
</div>
</footer>
<!--
<img src="img/bo.jpg" alt="bo!"/>
-->
<script src="js/scripts.js" type="text/javascript"></script>
</body>
</html>
也可以在启动后调用你的CSS文件。 – DaniP