响应式设计的引导程序 - 嵌套列的堆叠

Question

我有Twitter Bootstrap的问题：

我正在尝试做一个响应式布局，我有一个2列流体行，每列有2个嵌套列（图像中的第一个示例）。

当我尝试调整浏览器大小以假装它是一个屏幕较小的设备时，在某些分辨率下，嵌套列垂直堆叠（图像中的第二个示例），即使 这些嵌套列有足够的空间可以水平放置，而不是垂直放置（图像中的第三个示例）。

当有足够的空间让它们水平放置时，我该怎么做才能防止嵌套列垂直堆叠？

这是jsfiddle。

和图片如下

<div class="container">
<div class="row-fluid">
    <div class="span6">
        6
        <ul class="row-fluid">
            <li class="span6">
                3
            </li>
            <li class="span6">
                3
            </li>
        </ul>
    </div>
    <div class="span6">
        6
                    <ul class="row-fluid">
            <li class="span6">
                3
            </li>
            <li class="span6">
                3
            </li>
        </ul>

    </div>
</div>

我没有找到任何解决此问题的方法，所以我将不胜感激任何帮助！

Answer 1

好的，我已经解决了这个问题。对于那些我遇到问题的解决方案，我将li改为float：left和width为49％。像这样：

ul {
    width: 100%;
}

li {
    width: 49%;
    float: left;
}

可能有一些方法可以在不改变引导程序/硬编码的情况下执行此操作。

无论如何，谢谢！