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

Question

我在使用Twitter Bootstrap时遇到了问题：

我正在尝试创建一个响应式布局，我有一个由两个流式列组成的行，每个列中都有两个嵌套的列（第一个例子见图片）。

当我尝试调整浏览器大小以模拟较小屏幕设备时，某些分辨率下嵌套列会垂直堆叠（第二个例子在图片中），即使有足够的空间让这些嵌套列水平放置（第三个例子在图片中）。

我该怎么做才能防止嵌套列在有足够空间水平放置时被垂直堆叠？

这里是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>

​

我没有找到这个问题的解决方案，所以非常感谢任何帮助！

- user1887577

---

你用哪个浏览器/操作系统截取了屏幕截图？ - mhulse

另外，使用<ul>/<li>的原因是什么（如果是我，我会选择<div>）？还有一件事情吸引了我的注意，那就是最后一个</diV>（你应该把它改成小写的“v”）。这里有一个快速版本编辑链接，不过，我不确定它是否修复了任何问题。 - mhulse

Chrome、Firefox和Opera都给出了相同的结果。我正在Windows 7上工作。 对于这个问题，我感到很抱歉。通常情况下，我尝试使用不同的配置，据我所知，在Bootstrap中，ul/li有一点不同，但是我已经尝试过使用标准的div并得到了相同的结果。 - user1887577

在我的Mac Mountain Lion上，最新版本的Chrome，Firefox和Opera似乎表现正常。 我没有看到您在这些屏幕截图中看到的东西（从视觉上看，当您下降尺寸时，它看起来像您正在获得列，然后是100％流体，然后再次是列...正确吗？）。 看起来Twitter的Bootstrap的脚手架设置为在大约700个像素宽度处打破流体宽度列 （这就是我使用您发布的演示所看到的）。 - mhulse

谢谢你的回答！我不确定我是否正确理解了你的意思，我担心可能我没有清楚地解释我想做什么。在我的电脑上，大约在767px px处，Bootstrap会垂直堆叠蓝色列，这是可以的。但在767px及以下，红色列会垂直堆叠，而我希望将这些红色列放在单个蓝色列内水平定位，同时在低于480px的分辨率下有足够的空间让它们相邻放置，并在低于480px的分辨率下垂直堆叠所有内容。 - user1887577

Answer 1

好的，我已经解决了这个问题。对于那些分辨率出现问题的情况，我将li改为float：left，并将宽度更改为49％。就像这样：

ul {
    width: 100%;
}

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

可能有一些方法可以在不更改Bootstrap或硬编码的情况下完成此操作。

无论如何，谢谢！

- user1887577

---

谢谢你的更新。因为我没有看到你描述的问题，所以帮助你很困难。不管怎样，很高兴你已经解决了！ :) - mhulse