css - 没有 Javascript 的 Twitter Bootstrap 和响应式断点

Question

假设我有标记:

<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，并在窗口分辨率为 400 像素时全屏显示:

使用:

@media only screen 
and (max-width : 400px) {


}

Bootstrap 中是否有某种方式说:“所有 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 和 span6(从 4 列到 2 列)进行类似的拆分，间距会迫使它错位不同的元素。我开始认为如果没有 Javascript，我想在脑海中做的事情是不可能或极其困难的。

谢谢。

Answer 1

为什么不在行上使用额外的类，例如

<div class="container-fluid">

        <!-- 1 Col -->
        <div class="row-fluid">
            <div class="span12">
                <h2>1</h2>
            </div>
        </div>

        <!-- 2 Col -->
        <div class="row-fluid row-resize">
            <div class="span6">
                <h2>2</h2>
            </div>
            <div class="span6">
                <h2>2</h2>
            </div>
        </div>
</div>

然后您可以只在选择器上使用特异性

@media only screen 
and (max-width : 400px) {
    .row-resize >.span6{
        width: 100%;
        float: none ;
        margin: 0 0 20px 0px;
        padding: 0;
    }
}