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">
                <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，我想在脑海中做的事情是不可能的或极其困难的。

谢谢。

4

1 回答 1

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;
    }
}
于 2012-11-28T16:31:26.293 回答