嵌套Bootstrap列大小

Question

这不是我试图解决的“问题”，只是当我使用它时我注意到有关引导列的事情。

当我在列中放置一列时，似乎bootstrap的“脚手架”大小“重置”了。

例如：

假设我有一个col-md-9，我想在其中有两列，它们一起跨越“父”列的整个宽度。

我原本以为我会将两列的宽度设置为4.5（col-md-4.5），但是当我这样做时，两个较小的列表现得好像它们嵌套在一个col- md-12 ......换句话说，它们填满了col-md-9的3/4，而不是100％。如果我给他们col-md-6类，他们将一起跨越他们父母的整个宽度（col-md-9）。

以下是其外观/行为的直观表示：

同样，这本身并不是一个我需要解决的'问题'，只是我很好奇，因为它似乎与我在很多引导程序文档中读到的内容相冲突。

Answer 1

首先要做的事情是没有col-md-4.5，除非你为此制作了自己的自定义CSS类。但也许您执行了类似col-md-4和col-md-5之类的操作，以便添加到9，并查看您观察到的结果。

当我第一次开始学习bootstrap时，我感到困惑，因为我会用他们的网格系统做类似的事情。如果我有col-md-9，那么我预计孩子们永远不会超过9。我的元素从未定位过。然后我学会了它是如何工作的。

基本上，您可以将col-*-*的孩子视为“重置”他们自己，或者换句话说，即使他们的父母是12，他们总是会加起来col-xs-6（或者别的什么。）

Here是我做过的小提琴。

小提琴的代码在这里：

<div class="container">
   <div class="col-xs-12 red-outline"> 
      <div class="col-xs-4 blue-outline">
          col-xs-4
      </div>

      <div class="col-xs-5 blue-outline">
          col-xs-5 for a total of 9
      </div>
   </div>
</div>

<div class="container padding">
<div class="col-xs-12 red-outline">
 <div class="col-xs-6 green-outline">
          col-xs-6
      </div>

      <div class="col-xs-6 green-outline">
         col-xs-6 for a total of 12
      </div>
</div>
</div>

<div class="container padding">
   <div class="col-xs-12 red-outline">  
      <div class="col-xs-6 green-outline">
         <div class="col-xs-3 black-outline">
             3
         </div>
        <div class="col-xs-3 black-outline">
             3
         </div>
      </div>

       <div class="col-xs-6 green-outline">
         <div class="col-xs-6 black-outline">
             6
         </div>
        <div class="col-xs-6 black-outline">
             6
         </div>
      </div>
   </div>
</div>

当您运行此小提琴时，您可以看到的是红色顶部栏代表父col-xs-12。在第一个示例中，蓝色加起来为9，并且不会占据整个宽度。

你可以在我的第二个例子中看到绿色加起来最多12个，并占据整个宽度。

现在，对于第三个例子，我们有一些严重的初始事件正在进行中。我们有一个col-xs-12，然后是两个绿色col-xs-6，然后在左侧我们有两个col-xs-3，它们加起来为6（和你一样）可以看出，他们没有占据全宽）。在右侧，我们在col-xs-6内有两个col-xs-6，位于col-xs-12内。这有点令人费解，但只要明白你应该把所有东西加起来12，而不是加上父母的任何宽度。