嵌套引导柱尺寸

Question

这并不是我想要解决的“问题”，只是我在使用引导列时注意到的一些问题。

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

例如：

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

我本以为我会将两列的宽度设置为4.5 (col-md-4.5)，但当我这样做时，两个较小的列的行为就好像它们嵌套在一个col-md-12中.换句话说，他们占到了Md-9的3/4，而不是100%。如果我给他们的类-md-6，他们将一起跨越他们的父母的整个宽度(col-md-9)。

下面是这个文件的外观/行为的可视化表示：

​

​

再说一遍，这其实不是我需要解决的“问题”，我只是好奇，因为它似乎与我在很多引导文档中看到的内容相冲突。

Answer 1

首先要做的是--除非您已经为此创建了自己的自定义CSS类，否则不存在col-md-4.5。但是，您可能做了一些类似于col-md-4和col-md-5的操作，以添加到整个9中，并看到了您观察到的结果。

当我第一次开始学习引导时，我感到困惑，因为我会对他们的网格系统做类似的事情。如果我有一个col-md-9，那么我希望孩子们永远不会超过9。我的元素从来没有正确的定位。然后我学会了它的工作原理。

基本上，您可以将col-*-*的子级看作是“重置”自己，或者换句话说，即使他们的父级是col-xs-6 (或者其他什么)，他们也总是会加起来成为12。

这里是我做的小提琴。

小提琴的密码在这里：

<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-6在col-xs-12里面。这有点精神扭曲，但是你应该明白，你应该把所有的东西加到12上，而不是加到父母的任何宽度上。