Question

我注意到bootstrap没有缩进我的内部行和列。

当我创建顶级行/列时，左侧和右侧有填充。但是，当我嵌套时，不应用填充：

<div class="row">
  <div class="col-sm-6">
    Left Side
  </div>
  <div class="col-sm-6" style="background: #AAAAAA">
    Right Side
    <div class="row">
      <div class="col-sm-6">
        Right Side Inner 1
        <div class="row" style="background: yellow;">
          <div class="col-sm-6">
            Right Side Inner 1.1
          </div>
          <div class="col-sm-6">
            Right Side Inner 1.2
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        Right Side Inner 2
        <div class="row" style="background: green;">
          <div class="col-sm-6">
            Right Side Inner 2.1
          </div>
          <div class="col-sm-6">
            Right Side Inner 2.2
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

这是一个插件： http://plnkr.co/edit/remf5q4ltkQzM55553tB?p=preview

注意最外面的第6列（灰色）上的填充是如何与内部内容（黄色和绿色）相同的填充。

bootstrap是否只填充第一级行/列？

Answer 1

行做两件事：
- 明确修复浮动子列 - 偏移第一列和最后一列的最外部填充。此偏移允许无限嵌套。

通过将背景颜色放在列上，然后放入内部行，您将突出显示此偏移。尝试在col-sm-6中添加bg颜色，以查看内容区域的排列方式。

这将有助于向您展示嵌套......

.col-sm-6{
  Background: #eee;
}
.col-sm-6 .col-sm-6{
   Background: #ccc;
}
.col-sm-6 .col-sm-6 .col-sm-6{
  Background: #aaa;
}

等。

Bootstrap不缩进内部行/列

1 个答案: