我在 StackOverflow 上的代码示例和待售主题中看到类似以下内容(从未在 Bootstrap 的示例中)。
<div class="container">
<div class="row">
<div class="col-xs-12">
<p>Words go here</p>
</div>
</div>
</div>
或者
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<p>Words go here</p>
</div>
</div>
</div>
它让我发疯,因为根据 Bootstrap 自己的文档和常识,这两者对于全宽单列都不正确。
你什么时候真正使用网格系统?
col-*-12
什么时候参加进来?
最佳答案
你的挫败感是对的.. <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
完全是多余的。
因为 Bootstrap 3+ 是移动优先的,所以您声明的任何 col 类都会向上传播,这意味着它们适用于声明的设备(xs、sm、md、lg)和更大的设备。所以,col-xs-12 col-sm-12
是多余的。只需使用 col-xs-12
为了同样的效果。
此外,如果您不声明 xs 类,则布局将默认为 col-*-12 一旦低于您声明的 smalles col-class。例如<div class="col-sm-6">
是 sm
上的半角及以上,但在 xs
上为全角.鉴于 <div class="col-md-6">
是 md
上的半宽及以上,但在 sm
上全宽和 xs
.
话虽如此,您应该始终声明至少一个 col-class,以便它获得相关的填充和其他样式细节。
关于twitter-bootstrap - col-*-12 (col-xs/col-sm/etc) 在 Bootstrap 3 中使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26165996/