2

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

但是，使用网格嵌套，在嵌套行内这并不总是所需的行为。不管屏幕有多小，有些行不应该垂直堆叠。当我完全禁用所有响应式 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以进行澄清。

如何最好地解决这个问题？有没有办法使用本机引导功能来做到这一点？

4

3 回答 3

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

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

于 2013-02-12T13:18:29.773 回答
0

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

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

如果您深入了解引导网格的源代码，则相对容易提取用于生成 span[1-12] 系统的较少代码。

所以我只是把基础知识拿出来，用不同的选择器把它们放在我自己的文件中。所以现在，当我想使用不换行的跨度时，我只使用 .naps[1-12] （跨度向后拼写）。

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

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

于 2013-06-11T07:45:26.130 回答
0

我为解决此类问题所做的工作如下：

<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;

    }

}
于 2013-02-12T12:57:28.657 回答