引导列嵌套答案

【问题标题】：Bootstrap column nesting引导列嵌套
【发布时间】：2016-02-11 14:25:51
【问题描述】：

我在 Bootstrap 中有以下列布局

<div class="container">
    <div class="row">
        <div class="col-sm-4">
        </div>
        <div class="col-sm-8">
        </div>
    </div>
</div>

这会在左侧创建一个 1/3 列，在左侧创建一个 2/3 列。

我真正想要的是对列进行分层，以便左侧 (col-sm-4) 列位于 col-sm-12 列的顶部，如下所示：

Bootstrap 的网格可以做到这一点吗？

【问题讨论】：

要么使用absolute positioning，要么在sm-12 和remove padding 中添加remove padding（如果有的话），并在sm-4 上添加remove any margin跨度>

标签： css twitter-bootstrap

【解决方案1】：

您绝对可以嵌套列，但请务必为每个嵌套级别包含一个新的.row 元素。这避免了像以前的答案所建议的那样添加额外的类和 CSS。

大多数人没有意识到的是，Bootstrap 的 .row 和 .col-* 类协同工作以清除浮动，甚至消除填充。

无需 CSS：

<div class="container">
    <div class="row">
        <!-- 12 col element -->
        <div class="col-sm-12">
            <!-- additional row element -->
            <div class="row">
                <!-- 4 col element -->
                <div class="col-sm-4">
                </div>
            </div>
        </div>
    </div>
</div>

【讨论】：

【解决方案2】：

类似这样的：

.outer {
  padding: 0;
}

.inner {
  margin: 0;
}

<div class="container">
    <div class="row">
        <div class="col-sm-12 outer">
          <div class="col-sm-4 inner">
          </div>
        </div>

    </div>
</div>

【讨论】：

我是否仍然可以向 col-sm-12 的剩余部分添加内容，例如，如果我想要 col-sm-8 和 col-sm-4 的话？
是的，绝对是——它只是正常的网格行为，但添加了填充和边距样式以使它们齐平
@DarrenSweeney 将引导列类作为另一个列元素的直接后代是一种糟糕的形式。请看我的回答。

【解决方案3】：

这是我想出的：

.col-sm-12 {
  background: #ddd;
}

.your-bs-override {
  margin-right: 15px;
  margin-left: -15px;
  background: #000;
  height: 100px; // just to demo better
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-sm-12">
          inner col-sm-12
          <div class="col-sm-4 your-bs-override">
            inner col-sm-4
          </div>
        </div>
    </div>
</div>

了解上下文可能有助于完善目前提供的答案。

【讨论】：

将引导列类作为另一个列元素的直接后代是一种不好的形式。请看我的回答。
意识到这一点，谢谢。尽管我的边距调整模仿了 div.row - 灯泡并没有简单地调整 HTML。坏狗。