Bootstrap列分层

Question

我在Bootstrap中有以下列布局

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

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

我真正想要的是对列进行分层，使左（col-sm-4）列位于col-sm-12列的顶部，如下所示：

这是否可以使用Bootstrap的网格？

Answer 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>

Answer 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>

Answer 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>

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