html - 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> 中获得负边距。元素。这就是为什么您必须始终在行中使用列。