没有 Javascript 的 Twitter 引导和响应断点

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) {


}

是否有某种方式在引导程序中说：“所有 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;
    }
}