Twitter Bootstrap:响应式布局中的非响应式行 [英] Twitter Bootstrap: non-responsive row in responsive layout

问题描述

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

I'm using a responsive fluid grid system on my site, and in most cases the responsive Bootstrap behaviour is what I want: on small screens, the grid columns become fluid and stack vertically.

但是，使用网格嵌套，在嵌套行内部，这并不总是所需的行为.不管屏幕有多小，有些行都不应垂直堆叠.当我完全禁用所有响应式CSS代码时，这恰好是整个网格的行为，但是显然，如果外部行需要响应式行为，这是无可替代的.

However, using grid nesting, inside a nested row this is not always the desired behaviour. There are some rows that are not supposed to be stacked vertically, regardless how small the screen is. This is exactly the behaviour of the whole grid when I completely disable all responsive CSS code, but obviously this is no alternative if the responsive behaviour is required for the outer rows.

相关标记为:

<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 进行澄清.

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

How would one best solve this problem? Is there a way to do it with the native bootstrap functions?

推荐答案

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

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

这篇关于Twitter Bootstrap:响应式布局中的非响应式行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！