Bootstrap列不彼此相邻

Question

我在HTML中使用Bootstrap进行了简单的布局，

<div class='row'>
    <div class="col-6">
     <div class="col-2">
       FOO
     </div>
     <div class="col-4">
       BAR
     </div>
    </div>
</div>

我期望是FOO和BAR彼此相邻，但是不是吗？为什么？有人可以帮我吗？

这里是Demo

Answer 1

您已嵌套了这些列，请阅读有关引导的docs。要实现您的范围，请尝试以下代码：

<div class='row'>
  <div class="col-6">
  </div>
  <div class="col-2">
    FOO
  </div>
  <div class="col-4">
    BAR
  </div>
</div>

Answer 2

网格系统的完整大小为12。因此，列可以具有以下任意一项的组合：