引导程序-需要“ col-sm-12”吗？

adminko 发表于 Dev

管理员

一个简单的问题-是否<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>

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

马科斯·佩雷斯·古德（MarcosPérezGude）

所有的引导网格都将作为您的第二个示例。.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>元素中获得负边距。这就是为什么必须在行中始终使用列的原因。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。