奇怪的Bootstrap 3 网格行为
Strange Bootstrap 3 grid behavior
Html-代码示例:
<div class="row">
<div class="col-md-12 col-sm-6" id="div1"></div>
<div class="col-md-12 col-sm-6" id="div2"></div>
<div class="col-md-12" id="div3"></div>
</div>
花了很多时间后我发现,如果您不指定特定@media 大小的所有规则,bootstrap 会以奇怪的方式运行。
在此示例中,在小型设备上,“div3
”成为 div1
、div2
的容器,所有内容(例如:buttons
)不再可访问。
不应该定义默认规则吗?喜欢col-sm-12
,还是这样?
找出答案非常棘手。
编辑
Bootstrap 医生说:
Grid classes apply to devices with screen widths greater than or equal
to the breakpoint sizes, and override grid classes targeted at smaller
devices. Therefore, e.g. applying any .col-md-* class to an element
will not only affect its styling on medium devices but also on large
devices if a .col-lg-* class is not present.
在这种情况下col-md-12
以一种奇怪的方式应用于小型设备。
col-sm-6
有 float: left
。由于 col-md-12
没有浮动,它将出现在其他列的顶部。
<div class="row">
<div class="col-md-12 col-sm-6" id="div1"></div>
<div class="col-md-12 col-sm-6" id="div2"></div>
</div>
<div class="row">
<div class="col-md-12" id="div3"></div>
</div>
Html-代码示例:
<div class="row">
<div class="col-md-12 col-sm-6" id="div1"></div>
<div class="col-md-12 col-sm-6" id="div2"></div>
<div class="col-md-12" id="div3"></div>
</div>
花了很多时间后我发现,如果您不指定特定@media 大小的所有规则,bootstrap 会以奇怪的方式运行。
在此示例中,在小型设备上,“div3
”成为 div1
、div2
的容器,所有内容(例如:buttons
)不再可访问。
不应该定义默认规则吗?喜欢col-sm-12
,还是这样?
找出答案非常棘手。
编辑
Bootstrap 医生说:
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.
在这种情况下col-md-12
以一种奇怪的方式应用于小型设备。
col-sm-6
有 float: left
。由于 col-md-12
没有浮动,它将出现在其他列的顶部。
<div class="row">
<div class="col-md-12 col-sm-6" id="div1"></div>
<div class="col-md-12 col-sm-6" id="div2"></div>
</div>
<div class="row">
<div class="col-md-12" id="div3"></div>
</div>