0
之上啓動了一個列太遠了
我做了一個簡單的登錄頁面，以便可以使用響應式設計。我正在使用Bootstrap。Bootstrap網格行在
我有4個項目的網格。每個項目都有一個圖像，一個標題，一個描述和一個鏈接。在所有設備上，網格的行應該包含兩列，除了超小的，在這種情況下，它應該包含一列。
這一切似乎工作正常，經過全部4個Bootstrap尺寸的測試。但是，當我將它插入Codepen時，其中一列開始於行的中間，並強制下一列溢出到下一行。這隻發生在小屏幕上（768px到991px）。
我試圖改變某些樣式，如減少容器寬度和文本大小，但沒有產生所需的效果，同時保持設計。
這裏是正在發生的一個畫面： 
的「Nullam」格應該是在同一行的左側。
這裏是對Codepen鏈接：http://codepen.io/alanbuchanan/pen/PZXRPr
這裏是我的HTML：
<div class="bg-brown">
<div class="container">
<div class="row top-section">
<img class="lorem-image" src="http://i.imgur.com/7Eiswkk.png" alt="">
<h1>Ipsum Dolor sit Amet.</h1>
<p class="col-lg-offset-2 col-lg-8">Consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<div class="col-lg-12">
<button>Donec quam felis!</button>
</div>
</div>
</div>
</div>
<div class="bg-white">
<div class="container">
<div class="row content-section-1">
<div class="col-sm-6 col-xs-12">
<img class="img-responsive" src="http://lorempixel.com/400/250/cats/1" alt="">
<h2 class="thing-header">Ultricies nec.</h2>
<p class="thing-description">Pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p class="thing-link"><span>Donec pede justo!</span></p>
</div>
<div class="col-sm-6 col-xs-12">
<img class="img-responsive" src="http://lorempixel.com/400/250/cats/2" alt="">
<h2 class="thing-header">Fringilla vel.</h2>
<p class="thing-description">Aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut.</p>
<p class="thing-link"><span>Imperdiet a, venenatis vitae, justo!</span></p>
</div>
<div class="col-sm-6 col-xs-12">
<img class="img-responsive" src="http://lorempixel.com/400/250/cats/3" alt="">
<h2 class="thing-header">Nullam.</h2>
<p class="thing-description">Dictum felis eu pede mollis pretium. Integer tincidunt. </p>
<p class="thing-link"><span>Cras dapibus!</span></p>
</div>
<div class="col-sm-6 col-xs-12">
<img class="img-responsive" src="http://lorempixel.com/400/250/cats/4" alt="">
<h2 class="thing-header">Vivamus elementum semper nisi.</h2>
<p class="thing-description">Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu.</p>
<p class="thing-link"><span>Consequat vitae!</span></p>
</div>
</div>
<div class="row prefooter">
<p>Eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
</div>
</div>
</div>
<div class="bg-bottom">
<div class="container">
<div class="row content-section-2">
<h1><i class="fa fa-github"></i> <a href="https://github.com/alanbuchanan">alanbuchanan</h1></a>
</div>
</div>
</div>
這裏是我的CSS：
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400);
$font-thin: 'Source Sans Pro', sans-serif;
$top-section-bg-color: #48240A;
$btn-bg-color: #a5682a;
$btn-border-width: 2px;
$main-color: #EEEEEE;
$top-section-spacing: 80px;
$content-section-1-bg-color: #EEEEEE;
$content-section-1-font-color: black;
$content-section-2-bg-color: $top-section-bg-color;
body {
font-family: $font-thin;
color: $main-color;
font-weight: 200;
text-rendering: optimizeLegibility;
font-size: 14px;
}
a, a:active, a:hover, a:focus {
text-decoration: none;
border-bottom: 1px dashed $main-color;
color: $main-color;
}
.bg-brown {
background-color: $top-section-bg-color;
}
.bg-white {
background-color: $content-section-1-bg-color;
}
.top-section {
img {
display: block;
margin: 0 auto;
margin-top: $top-section-spacing;
}
h1 {
text-align: center;
color: $main-color;
margin-top: $top-section-spacing;
}
p {
text-align: center;
margin-top: $top-section-spacing;
}
button {
font-family: $font-thin;
display: block;
background-color: $btn-bg-color;
color: $main-color;
font-size: 20px;
font-weight: 200;
text-decoration: none;
cursor: pointer;
padding: 9px 20px;
margin: $top-section-spacing auto $top-section-spacing auto;
border-radius:6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-style: none;
border: $btn-border-width solid $btn-bg-color;
transition: background-color 0.2s ease;
&:focus {
outline: none;
}
}
}
.content-section-1 {
background-color: $content-section-1-bg-color;
color: $content-section-1-font-color;
margin-top: 100px;
img {
display: block;
margin: 0 auto;
width: 100%;
}
.thing-header {
margin: 40px 0;
text-align: center;
font-weight: 200;
}
.thing-description {
text-align: center;
margin: 0;
padding: 0;
font-size: 14px;
}
.thing-link {
display: block;
text-align: center;
font-weight: 400;
margin-bottom: 40px;
span {
text-decoration: none;
border-bottom: 1px dashed black;
}
}
}
.prefooter {
color: $content-section-1-font-color;
padding: 50px;
text-align: center;
}
.bg-bottom {
background-color: $content-section-2-bg-color;
}
.content-section-2 {
h1 {
text-align: center;
font-weight: 200;
padding: 50px;
}
}
html.no-touch button:hover {
background-color: $top-section-bg-color;
border: $btn-border-width solid $btn-bg-color;
}
@media screen and (min-width: 320px) and (max-width: 480px) {
.lorem-image {
width: 220px;
}
.thing-header, .thing-description, .thing-link {
text-align: left !important;
}
}
當我在媒體查詢中設置'max-width：991px'時，我發現這是最好的方法。 – alanbuchanan