一個行下的另一種走在移動設備上

Question

我設計了一個網站是這樣的：

<section> 
    <div class="container-fluid container-full"> 
    <div class="row"> <!-- Row 1--> 
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 "> 
     <div class="first-row">Content</div> 
    </div> 
    </div> 
</div> 
</section> 
<section> 
<div class="container-fluid"> 
    <div class="row"> <!-- Row 2 --> 
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 righ-left-panel"></div> 
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 second-row"> 
    <div class="row"> 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">Content</div> 
     <div class="col-xs-12 col-sm-12 col-md-8">Content</div> 
    </div> 
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 righ-left-panel"></div> 
    </div> 
</div> 
</section> 
<section> 
<div class="container-fluid"> 
    <div class="row"> <!-- Row 3 --> 
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 righ-left-panel"></div> 
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 third-row"> 
    <div class="row"> 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">Content</div> 
     <div class="col-xs-12 col-sm-12 col-md-8">Content</div> 
    </div> 
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 righ-left-panel"></div> 
    </div> 
</div> 
</section> 

這是一個包裝內，並在大屏幕設備完全加載的一切。

但不適用於小於700px的設備。

第三行恰好在第二行，完全覆蓋它。

什麼問題，我該如何解決？

這裏說到CSS

.first-row{ 
    background:url(../images/top-bg.jpg) no-repeat center top ; 
    height: 420px; 
    max-height: 420px !important; 
    margin: 0 auto; 
    width: 100% 
    box-shadow: 1; 
} 

.second-row{ 
    height: 610px; 
    width: 80%; 
    min-height: 130px; 
} 

@media only screen and (min-width: 701px){ 
    .second-row{ 
     background: url(../images/ponebg.png) no-repeat 100% top; 
     margin-top: -70px; 
     background-size: 100%; 
    } 
} 

@media only screen and (max-width: 700px){ 
    .second-row{ 
     background: none; 
     margin-top: 10px; 
    } 
} 

.third-row{ 
    max-width: 1050px; 
    height: 610px; 
    /*alignment: center;*/ 
    width: 80%; 
} 

Answer 1

的問題是與2行的第2行內和行3，不與「主」行，其實。

看一看這樣的：

<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">Content</div> 
<div class="col-xs-12 col-sm-12 col-md-8">Content</div> 

這告訴Twitter的引導把第二排的內容在其自己的行，如果屏幕爲sm或xs。將這兩列的那些列數更改爲總共12列，並且它們將保持在同一行上。

你可以做這樣的事情：

<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">Content</div> 
<div class="col-xs-8 col-sm-8 col-md-8">Content</div> 

一般情況下我給你一個Bootply鏈接來測試，但它似乎在這一刻因爲某種原因將下降，所以這裏是一個的jsfiddle直到那時：http://jsfiddle.net/pgovggjy/

編輯：在您更新的問題添加CSS代碼後，我的代碼仍然有效。您的問題可能與您嘗試使用的圖像的大小/類型有關。如果它仍然不起作用，您可能希望將它上傳到某個地方並提供它們的直接鏈接。

這裏是一個Bootply測試環節，你可以玩：http://www.bootply.com/Apeolkpnvh

Answer 2

的問題是與行的高度。 我修改CSS

.first-row{ 
    background:url(../images/top-bg.jpg) no-repeat center top ; 
    max-height: 420px !important; 
    margin: 0 auto; 
    width: 100% 
    box-shadow: 1; 
} 

.second-row{ 
    width: 80%; 
    min-height: 130px; 
} 

@media only screen and (min-width: 701px){ 
    .second-row{ 
     background: url(../images/ponebg.png) no-repeat 100% top; 
     margin-top: -70px; 
     background-size: 100%; 
    } 
} 

@media only screen and (max-width: 700px){ 
    .second-row{ 
     background: none; 
     margin-top: 10px; 
    } 
} 

.third-row{ 
    max-width: 1050px; 
    /*alignment: center;*/ 
    width: 80%; 
} 

我刪除了所有高度的它完美地工作！