假设我有标记:
<div class="container-fluid">
<!-- 1 Col -->
<div class="row-fluid">
<div class="span12">
<h2>1</h2>
</div>
</div>
<!-- 2 Col -->
<div class="row-fluid">
<div class="span6">
<h2>2</h2>
</div>
<div class="span6">
<h2>2</h2>
</div>
</div>
</div>
假设我希望第二行中的 2 列成为 span12 并在窗口分辨率为 400px 时全屏显示:
使用:
@media only screen
and (max-width : 400px) {
}
有没有办法在引导程序中说:'所有 span6 都应该在这个分辨率下 span12'?
我可以使用 hacky 方法来实现它,例如:
@media only screen
and (max-width : 400px) {
.span6{
width: 100% !important;
float: none !important;
margin: 0 0 20px 0px !important;
padding: 0 !important;
}
}
但这显然很恶心。
我也知道我可以用 JS 附加一个类,但我不想使用 Javascript - 这个网站必须是干净的!
编辑
James 在下面提出了一个很好的解决方案,但是我是否应该对 span3 的拆分做类似的操作(从 4 列到 2 列),排水沟会迫使它错位不同的元素。我开始认为如果没有 Javascript,我想在脑海中做的事情是不可能的或极其困难的。
谢谢。