html - 响应式设计的 Bootstrap - 嵌套列的堆叠

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

可能应该有一些方法可以在不改变 Bootstrap/或硬编码的情况下做到这一点。

无论如何，谢谢!