css - 在 Bootstrap 中缩小屏幕时如何防止两个 "spanX"div 重叠？

Question

我正在使用 Twitter Bootstrap 2.3 的 responsive 布局。我有一个包含两个 span4 div 的 span9 row-fluid div。

为了测试屏幕的流畅性，我正在缩小窗口。右侧 span4 与左侧 span4 重叠的特定点出现了。如果我继续缩小窗口，它会适当堆叠。但我希望它在重叠之前适当堆叠。我想要的功能是否已内置到 Bootstrap 中，而我只是做得不对？

当然感谢任何帮助!

Answer 1

也许仔细检查您使用的是 Bootstrap 响应式 CSS，并且您的 HTML 中没有错误。我不是很清楚你的布局，但这里有一个接近的工作示例:http://jsfiddle.net/panchroma/RMUmW/

HTML

<div class="container">
    <div class="row-fluid">
        <div class="span9">
            <div class="row-fluid">
                <div class="span4">
                    nested span4
                </div>
                 <div class="span4">
                    nested span4
                </div>
                 <div class="span4">
                    nested span4
                </div>

            </div> <!-- end nested row -->

        </div> <!-- end span9 -->
        <div class="span3">
            span 3
        </div> <!-- end span3 -->
    </div><!-- end row -->

</div> <!-- end container -->   

祝你好运!