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嵌套行不正确的行为

回答

相关问题