bootstrap3嵌套行不正確的行爲

讓我們說我有1200像素的容器。
然後我有第一個div與col-lg-4，這意味着400px的第一級。
在這個col-lg-4裏面我創建了第二層行，我的理解是新行將充當容器。

新的行寬應該用來計算列分解，這裏400px將意味着「col-xs」，我得到錯誤嗎？

<div class="container" style="border:1px solid"> 
    <div class="row"> 
    Let's say the container is 1200px 
    </div> 
    <div class="row"> 
    <div class="col-lg-4"> 
     <div class="row" style="border:1px solid blue;"> 
       This div size should be 1200/4=300px (which means <b>col-xs</b> only should be active)    
      </div> 
      <div class="col-sm-6 col-md-4 col-lg-3"> 
       <div style="border:1px solid red;"> 
       But it is always using col-lg-3, instead of col-sm-6 
       </div> 
      </div> 
    </div> 
    </div> 
    How can I have the red box to use the <b>xs/sm</b> size and use half of the 300px ? 
</div><!-- /.container -->

Code Example available here

從給定的例子，我怎麼可能有紅色節點使用COL-SM-6，而不是COL-LG-3？

我需要讓他認爲這是小屏幕，而不是大的...

來源

2016-03-01 Arthur Breton

嵌套列的寬度是相對於它的父，但不依賴於屏幕斷點像col-xs。 l，m，sm，xs斷點僅與整個屏幕/視口相關，而不是父容器。如果以百分比而不是像素來考慮它，可能會更清楚。

col-*-4是容器的33％的寬度

col-*-6是容器的50％的寬度

所以，當你的400像素的計算是對的上1200像素的視口，它不會改變斷點（xs）的嵌套/子列（s）。如果您希望它在大屏幕上爲其父項的50％寬度，請在嵌套列上使用col-lg-6。如果希望它成爲所有屏幕上父級的50％，請在嵌套列上使用col-xs-6。

來源

2016-03-01 13:34:55 ZimSystem

您可以使用此，嘗試去了解它

<div class="container-fluid" style="border:1px solid"> 
    <div> 
    Let's say the container is 1200px 
    </div> 
    <div class="row"> 
    <div class="col-sm-4" style="border:1px solid blue;"> 
     <div> 
       This div size should be 1200/4=300px   
     </div> 
     <div class="row"> 
     <div class="col-sm-6" style="border:1px solid red;"> 
      This use col-sm-6 
     </div> 
     </div> 
    </div> 
    </div> 
    How can I have the red box to use the <b>xs/sm</b> size and use half of the 300px ? 
</div><!-- /.container -->

基本上，你不需要對一切使用LG，只需使用SM和先了解它。 http://www.bootply.com/eMimw5tMGd

來源

2016-03-01 13:38:23 AchmadJP

bootstrap3嵌套行不正確的行爲

回答

相關問題