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

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

可能应该有某种方法可以在不更改引导程序/或硬编码的情况下做到这一点。

无论如何，谢谢！