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

我对Twitter引导有一个问题：

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

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

当有足够的空间水平放置嵌套列时，我应该如何防止嵌套列垂直堆叠

这是一本书

图片如下

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

6.


3.


3.


6.


3.


3.

​

---

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

好的，我已经解决了这个问题。对于这些决议，我有一个问题，我改变了李浮动：左和宽度为49%。像这样：

ul {
    width: 100%;
}

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

也许应该有一些方法可以做到这一点，而不必更改引导/或硬编码

---

无论如何，谢谢

您使用的屏幕截图是什么浏览器/操作系统？另外，是否有理由使用

/

（如果是我，我会选择

）？另一件突然出现在我面前的事情是最后一个

（你可能应该把它写成小写的“v”）。一个快速的版本编辑，虽然，我不确定是否修复了任何东西。铬，火狐和Opera给出了相同的结果。我正在使用Windows7。我为这个diV感到抱歉。一般来说，我尝试过不同的配置，据我所知，ul/li在引导方面有点不同，但我尝试过standart diV，得到了相同的结果。在我的mac Mountain Lion上，最新版本的Chrome、Firefox和Opera的性能似乎与预期相符。我看不到你在那些屏幕截图中看到的东西（从视觉上看，看起来你得到的是柱状物，然后是100%流体，当你缩小尺寸时，柱状物再次出现……对吗？）。看起来像脚手架（这就是我看到的）。谢谢你的回答！我不确定你是否理解正确，我担心我可能错误地解释了我想做什么。在我的电脑上，767px左右的px引导程序垂直堆叠蓝色列，这没问题。但在767px和更低的红色列是垂直堆叠的，我希望单个蓝色列中的红色列水平放置，而在480px下，有足够的空间让它们一个挨着另一个放置，并且以低于480px的分辨率垂直堆叠所有内容。感谢更新。我很难帮助你，因为我没有看到你描述的问题。不管怎样，很高兴你修好了！：）