假设您有这个简单的标记。
<div class="container">
<div class="row">
<div class="col-md-12">
<h1> title </h1>
</div>
</div>
</div>
如果我想补充一个margin-top
使h1
向容器的中部向下(它会默认在最顶部放置它自己),这将是更好的涂复的h1
,.row
还是.col-md-12
?
例如:
.row {
margin-top: 100px;
}
更新:这不是一个“主要基于意见的”问题,因为根据我在哪里应用样式,在涉及响应方面时,它可能会破坏预期的行为。达伍德·阿万(Dawood Awan)的答案是该问题正当性及其与意见无关的一个完美示例。
使用行和列交替使用行的
边距为负,以确保列遵守容器的宽度。
container
| row
| | column
| | | row
| | | | column
| | | | column
| | | row
| | | | column
| | | | column
| | column
始终在列上包括col-xs- *
这是为了防止出现浮动问题。如果您的专栏应该是12宽,请不要忽略col-xs-12
<div class="row">
<div class="col-xs-12 col-md-6">
Some stuff
</div>
</div>
移动优先
从最小的屏幕尺寸开始。从xs <sm <md <lg开始,您应该一切都很好!
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
Some stuff
</div>
</div>
小列充当较大列
sm列也充当md列,如果没有另外指定的话。
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
This is the same
</div>
<div class="col-xs-12 col-sm-6">
as this one
</div>
</div>
最后:不要设置行和列的样式!
随意添加类来修改它们,但不要以任何方式覆盖它们!
不好的例子:
.row {
border: 5px solid pink;
margin: 0 10px;
}
<div class="row">
<div class="col-xs-12">
This is a no-go!
</div>
</div>
好例子
.pink-bordered {
border: 5px solid pink;
margin: 0 10px;
}
<div class="row pink-bordered">
<div class="col-xs-12">
Totally fine
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句