Bootstrap 3響應式桌面和移動版式

使用引導程序3來設計我的響應式網站時，我無法讓佈局在1366px v 786px的桌面寬度分辨率下工作。當佈局減少到1024px時，它被認爲是移動斷點。Bootstrap 3響應式桌面和移動版式

如何控制佈局從桌面切換到移動佈局的時間？ 1366*768 resolution 1024*768 resolution

這是我的HTML

<body> 
<div class="container-fluid"> 

    <div class="container-fluid header"> 
     <div id="container">   
     </div> 
    </div> 

    <div class="row-fluid"> 

     <div class="col-lg-3"> 
      <div class="well"> 

      </div> 
     </div> 

     <div class="col-lg-9"> 

      <div class="col-lg-6"> 
       <div class="title"> 
        <h3>title 1</h3> 
       </div> 
      </div> 

      <div class="col-lg-6"> 
       <div class="title"> 
        <h3>title 2</h3> 
       </div> 
      </div> 

     </div> 
    </div> 
</div>

來源

2013-08-02 Mohamed Nagy

可能是你正在談論媒體查詢？ – BrOSs

的row-fluid和container-fluid已從BS 3中棄用，所以現在您只需使用container和row

您可以使用新的「小」網格類（col-sm-*），以防止從佈局上堆疊小尺寸顯示器..

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-3 col-sm-3"> 
      <div class="well"> 

      </div> 
     </div> 
     <div class="col-lg-9 col-sm-9"> 

      <div class="col-lg-6 col-sm-6"> 
       <div class="well"> 

      </div> 
      </div> 

      <div class="col-lg-6 col-sm-6"> 
       <div class="well"> 

       </div> 
      </div> 

     </div> 
    </div> 
</div>

演示：http://bootply.com/71450

如果你希望它永遠不會疊加即使在最小的顯示器上，也可以使用小網格類別col-xs-*。

來源

2013-08-02 15:48:50 ZimSystem

太棒了！唯一的，你建議「col- *」爲不堆疊的小列，但我認爲你的意思是，「col-xs- *」 – darkpbj

是的，'xs'它是..我更新了我的答案。謝謝。 – ZimSystem

在你的main.css（或任何名字，你放置），這樣做下面的代碼：

@media(max-width:1024px) { 
    body { 
    padding-right: 0 !important; 
    padding-left: 0 !important; 
    } 

    #heading > .container { 
    padding: 0 15px; 
    } 

    #main-content > .container { 
    padding: 0 15px; 
    } 

    #footer > .container { 
    padding: 0 15px; 
    } 
    #heading h1 { 
    font-size: 50px; 
    line-height: 55px; 
    } 
    #heading h4 { 
    font-size: 20px; 
    line-height: 25px; 
    } 
}

來源

2013-08-02 15:45:54 BrOSs

通過關於網格系統的文檔（http://getbootstrap.com/css/），看起來它們在< 768,768-992,992-1200和> 1200像素處有斷點，所以你現在正陷入「中等設備'類。

您可以修改bootstrap.css文件以更改您的特定情況下的斷點。

@media (min-width: 992px) {

上線1002和4595.

來源

2013-08-02 15:49:51 beercodebeer

Bootstrap 3響應式桌面和移動版式

回答

相關問題