css - 自举列分层

我在Bootstrap中有以下列布局

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

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



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



Bootstrap的网格有可能吗？

最佳答案

您绝对可以嵌套列，但是一定要为每个嵌套级别包括一个新的.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>

关于css - 自举列分层，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35341949/