Twitter bootstrap bootstrap3嵌套行的行为不正确

我对带引导的嵌套行有些误解

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

新的行宽度应该用于计算列分解，这里400px表示“col xs”，我弄错了吗

假设容器是1200px
此div大小应为1200/4=300px（这意味着仅X列应处于活动状态）
但它总是使用col-lg-3，而不是col-sm-6
如何让红色框使用xs/sm大小，并使用300px的一半？

在给定的示例中，如何让红色节点使用col-sm-6而不是col-lg-3？

---

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

嵌套列的宽度是相对于其父列的，但不依赖于屏幕断点，如

col xs

。l、m、sm、xs断点仅与整个屏幕/视口相关，而不与父容器相关。如果你用百分比而不是像素来考虑，也许会更清晰

col-*-4

是容器宽度的33%

col-*-6

是容器宽度的50%

---

因此，当您在1200px视口上计算400px时，它不会更改嵌套/子列的断点（xs）。如果希望嵌套列在大屏幕上的宽度为其父列的50%，请在嵌套列上使用

col-lg-6

。如果希望它在所有屏幕上占父屏幕的50%，请在嵌套列上使用

col-xs-6

。

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

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

假设容器是1200px
该div大小应为1200/4=300px
这将使用col-sm-6
如何让红色框使用xs/sm大小，并使用300px的一半？

基本上，你不需要在任何事情上都使用lg，只需要使用sm并首先理解它。

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