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

使用：

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


}

引导中是否有某种说法：'所有span6应该在此分辨率下跨越12？'

我可以使用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 - 这个网站必须干净！

修改

詹姆斯在下面提出了一个很好的解决方案，但我是否应该做类似的将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;
    }
}

没有Javascript的Twitter Bootstrap和响应断点

1 个答案: