Question

我在我的网站上使用了响应式流体网格系统，在大多数情况下，响应式Bootstrap行为是我想要的：在小屏幕上，网格列变得流畅并垂直堆叠。

但是，使用网格嵌套，在嵌套行中，这并不总是所需的行为。无论屏幕有多小，都有一些行不应垂直堆叠。当我完全禁用所有响应式CSS代码时，这正是整个网格的行为，但显然如果外部行需要响应行为，则无可奈何。

相关标记是：

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span6">This column should be stacked on small devices.</div>
        <div class="span6">
            <div class="row-fluid">
                <div class="span6">Nested row. This column should NOT be stacked on small devices.</div>
                <div class="span6">Nested row. This column should NOT be stacked on small devices.</div>
            </div>
        </div>
    </div>
</div>

请参阅此jsfidde以获取说明。

如何最好地解决这个问题？有没有办法使用本机引导程序功能？

Answer 1

[class*="span"] .span6 { display: inline-block; width: 48.61878453038674%}

例如：
http://jsfiddle.net/NfTQ7/1/

Answer 2

我为解决这样的问题所做的工作如下：

<div class="row-fluid">
    <div id="remove-mobile" class="span6">Nested row. This column should NOT be stacked on small devices.</div>
    <div id="remove-mobile" class="span6">Nested row. This column should NOT be stacked on small devices.</div>
</div>


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

    #remove-mobile {

        display:none;

    }

}

通过这种方式，您可以在较小的设备上摆脱整个混乱，只需执行相反的操作即可添加专门针对移动设备尺寸的代码：

<div class="row-fluid">
    <div id="show-mobile" class="span6">Your Beautiful Code For Mobile Only</div>
</div>


@media only screen and (min-width: 481px) {


    #show-mobile {

        display:none;

    }


}


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

    #show-mobile {

        display:block;

    }

    #remove-mobile {

        display:none;

    }

}

Answer 3

这不是最简单的解决方案，但我发现它符合我的需求

https://github.com/twitter/bootstrap/blob/master/less/mixins.less#L572

如果您深入了解bootstraps网格的源代码，则可以相对轻松地提取用于生成span [1-12]系统的较少代码。

所以我只是把基础知识拉出来并用不同的选择器放在我自己的文件中。所以现在，当我想使用不包裹的span时，我只使用.naps [1-12]（Span向后拼写）。

响应式CSS查找.span [1-12]选择器，因此忽略了我的.naps元素。

它不优雅，而且不是特别可扩展。它确实有效： - /

Twitter Bootstrap：响应式布局中的无响应行

3 个答案: