如何在響應式Bootstrap頁面中正確排序容器？

我想弄清楚如何在一個頁面中設置我的容器的順序，以便它們在調整大小時能夠在移動和桌面佈局中正確地重新排序。如何在響應式Bootstrap頁面中正確排序容器？

這裏是我的代碼，順序是正確的位置在平板電腦中COL-SM] &和電話[COL-XS]觀點：

<!DOCTYPE html> 

<html lang="en"> 

    <head> 

     <meta charset="utf-8"> 

     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 

     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

     <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"> 

     <style> 

     div {border:1px solid #000;} 

     div.logo {background:transparent url(../images/logo.png) no-repeat left top; height:100px;} 

     div.rider {height:50px;background-color:#06C;} 

     div.search {height:50px;background-color:#F39;} 

     div.headers {height:100px;background-color:#933;} 

     div.navigation1 {height:300px;background-color:#69F;} 

     div.content {height:600px;background-color:#0FC;} 

     div.social {height:50px;background-color:#C99;} 

     div.navigation2 {height:300px;background-color:#3FF;} 

     div.footer {height:150px;background-color:#000;}   

     </style> 

     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> 
     <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> 
     <![endif]--> 

    </head> 

    <body> 

     <div class="container"> 

      <div class="col-md-12 logo"></div>   

      <div class="col-md-3 col-xs-12"> 

       <div class="rider">rider</div> 

       <div class="search">search</div> 

       <div class="navigation1">1st Nav</div> 

      </div> 

      <div class="col-md-9 col-xs-12"> 

       <div class="headers">headers</div> 

       <div class="content">content</div> 

      </div> 

      <div class="col-md-3 col-xs-12"> 

       <div class="social">social</div> 

       <div class="navigation2">2nd Nav</div> 

       <div class="footer">footer</div> 

      </div> 

     </div> 

     <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
      <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script> 

    </body> 

</html>

的問題是針對桌面佈局，有一個大在第一個導航div下的差距，社交div應該立即在桌面和更大的視圖下的第一導航下，而不管內容div的高度如何。

我該如何解決這個問題？我嘗試使用拉，推，偏移和浮動方法，但沒有給我正確的結果。

來源

2013-11-09 Sean Kimball

正在爲你一個答案，而只是一個提示：你並不需要指定'COL-XS-12'，因爲這基本上就是它會默認爲，如果你不爲任何指定尺寸。 –

你說的差距其實並不是固體左欄中的差距。它是第一行左列中的內容與第二行左列之間的差距。

最後一個包裝div（social/nav2/footer）位於第二行，因此只有在第二個包裝div（標題/內容）的高度時才能觸摸第一個包裝div（騎手/ search/nav1））小於第一個（這絕對不是這裏的選項）。

爲了解決這個問題，我建議把最後一個包裝div的內容放入第一個。但是它會破壞手機和平板電腦佈局的順序。

作爲第二個選項，我可以提供將最後一個包裝div的內容複製到第一個，但通過在上部實例上使用.visible-md和.visible-lg類，使其僅在桌面屏幕尺寸上可見並顯示一個僅在手機屏幕中使用（使用.hidden-md .hidden-lg類）。從性能角度來看，這不是最好的想法（額外的流量，額外的服務器端處理），但它可以工作。

<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"> 
     <style> 
     div {border:1px solid #000;} 
     div.logo {background:transparent url(../images/logo.png) no-repeat left top; height:100px;} 
     div.rider {height:50px;background-color:#06C;} 
     div.search {height:50px;background-color:#F39;} 
     div.headers {height:100px;background-color:#933;} 
     div.navigation1 {height:300px;background-color:#69F;} 
     div.content {height:600px;background-color:#0FC;} 
     div.social {height:50px;background-color:#C99;} 
     div.navigation2 {height:300px;background-color:#3FF;} 
     div.footer {height:150px;background-color:#000;}   
     </style> 
     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> 
     <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> 
     <![endif]--> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="col-md-12 logo"></div>   
      <div class="col-md-3 col-xs-12"> 
       <div class="rider">rider</div> 
       <div class="search">search</div> 
       <div class="navigation1">1st Nav</div> 
       <div class="visible-md visible-lg"> 
        <div class="social">social</div> 
        <div class="navigation2">2nd Nav</div> 
        <div class="footer">footer</div> 
       </div> 
      </div> 
      <div class="col-md-9 col-xs-12"> 
       <div class="headers">headers</div> 
       <div class="content">content</div> 
      </div> 
      <div class="col-md-3 col-xs-12 hidden-md hidden-lg"> 
       <div class="social">social</div> 
       <div class="navigation2">2nd Nav</div> 
       <div class="footer">footer</div> 
      </div> 
     </div> 
     <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
      <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script> 
    </body> 
</html>

來源

2013-11-09 22:53:55 JetLizard

我不得不同意，這些是我看到爲實現目標而努力的唯一選擇。 –

如何在響應式Bootstrap頁面中正確排序容器？

回答

相關問題