bootstrap3嵌套行不正确的行为

Question

我对使用 Bootstrap 的嵌套行有一些误解...

• 假设我有一个 1200 像素的容器。
• 然后我有一个带有 col-lg-4 的第一个 div，这意味着第一级为 400 像素。
• 在这个 col-lg-4 中，我创建了一个二级行，我的理解是新行将充当容器。

应该使用新的行宽来计算列细分，这里 400px 表示“col-xs”，我理解错了吗？

screenshot of the problem

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

因此，当您在 1200 像素视口上计算 400 像素时，它不会更改嵌套/子列的断点 (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