嵌套Bootstrap列大小调整

Question

这不完全是一个“问题”，我试图解决，只是当我与他们合作时，我已经注意到有关引导列的问题。

似乎引导程序的“脚手架”大小“重置”不知何故，当我把列放入一列。

例如：

比方说，我有一个COL-MD-9，我想它里面两列，它们一起跨越“父”列的整个宽度。

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

这是什么，这将看起来/像一个可视化表示：

再次，这是不是一个真正的“问题”，我需要本身解决了，只是我很好奇因为它似乎与我在很多bootstrap文档中读到的内容相冲突。

Answer 1

第一件事是第一件事 - 没有col-md-4.5，除非你为你自己定制了CSS类。但是也许你做了一些像col-md-4然后col-md-5加到总共9，并看到你观察到的结果。

当我第一次开始学习引导时，我很困惑，因为我会用他们的网格系统做类似的事情。如果我有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，而不是加起来任何宽度的父母。