Question

我误解了Bootstrap的嵌套行...

让我说我有一个1200px的容器。
然后我有一个col-lg-4的第一个div，这意味着第一个级别为400px。
在这个col-lg-4中我创建了一个第二级行，我的理解是新行将充当容器。

新的行宽应该用于计算列分解，这里400px意味着＆＃34; col-xs＆＃34;，我做错了吗？

<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？

我需要让他认为它是在小屏幕而不是大屏幕......

Answer 1

嵌套列的宽度是相对于它的父级的，但不依赖于像col-xs这样的屏幕断点。 l，m，sm，xs断点仅与整个屏幕/视口有关，而与父容器无关。如果以百分比而不是像素来考虑它，可能会更清楚。

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

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

因此，虽然您在1200px视口上计算400px是正确的，但它不会更改嵌套/子列的断点（xs）。如果希望在大屏幕上将其作为父级的50％宽度，请在嵌套列上使用col-lg-6。如果希望它在所有屏幕上都是父级的50％，请在嵌套列上使用col-xs-6。

Answer 2

你可以使用它，尝试理解它

<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

bootstrap3嵌套行不正确行为

2 个答案: