Bootstrap - 需要“col-sm-12”？

Question

简单的问题 - 需要<div class="col-sm-12">吗？

示例1：

<div class="row">
    <h1>title</h1>
    <div class="col-sm-6">
        half
    </div>
    <div class="col-sm-6">
        half
    </div>
</div>

示例2：

<div class="row">
    <div class="col-sm-12">
        <h1>title</h1>
    </div>
    <div class="col-sm-6">
        half
    </div>
    <div class="col-sm-6">
        half
    </div>
</div>

有什么更好，为什么？ 谢谢。

Answer 1

所有bootstrap网格都是第二个例子。 .row元素具有负余量以补偿.col-*元素中的正填充。所以你的第二个例子更好，更合乎逻辑。

在第一个示例中，您没有得到.col-*元素的填充，而负边距会产生意外结果。

col-sm-12的示例：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="row">
    <div class="col-sm-12">
        <h1>title</h1>
    </div>
    <div class="col-sm-6">
        half
    </div>
    <div class="col-sm-6">
        half
    </div>
</div>

没有col-sm-12的示例：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="row">
    <h1>title</h1>
    <div class="col-md-6">
        half
    </div>
    <div class="col-md-6">
        half
    </div>
</div>

如您所见，在第二个示例中，您将在<h1>元素中获得负边距。这就是为什么你必须始终在行中使用列。

Answer 2

好吧，我建议您使用以下方式：

<h1>title</h1>
<div class="row">
    <div class="col-sm-6">
        half
    </div>
    <div class="col-sm-6">
        half
    </div>
</div>

通过这种方式，我们无需担心-ve margin问题或其他一些布局问题。它是一个很好的规则，引导网格列应该只是.row

的直接子节点