Bootstrap响应样式表打破跨度宽度？

Question

忙着实现包含响应式CSS文件的Twitter Bootstrap，但这会导致我的跨度问题。整个宽度应该达到span12，然后6 * span2也应该这样做。

现在这是有趣的部分。如果未加载bootstrap-responsive.css，它会工作，但是当我加载响应文件时，最后一个跨度浮动到左下角。

起初我以为它可能是我的边界，但我将它们移除，它仍然漂浮在底部。

            <div class="row" style="border: 1px solid green">
                <div class="container" style="border: 1px solid blue">
                    <div class="span2" style="border: 1px solid red">Foo!</div>
                    <div class="span2" style="border: 1px solid red">Bar!</div>
                    <div class="span2" style="border: 1px solid red">Baz!</div>
                    <div class="span2" style="border: 1px solid red">Foo!</div>
                    <div class="span2" style="border: 1px solid red">Bar!</div>
                    <div class="span2" style="border: 1px solid red">Baz!</div>
                </div>
            </div>

应该可以加载两个CSS文件并获得合适的布局，对吗？否？

我无法找到任何其他表明类似结果的问题。我的Bootstrap CSS文件未经修改，我还没有自己的样式表构建，因此我认为这不是我做错了。

有什么想法吗？

谢谢！

Kobus

编辑：上传截图以获取更多信息。

Answer 1

您可以尝试以下代码，使用 bootstrap-responsive.css

时不应该有任何问题

<div class="row" style="border: 1px solid green">
  <div class="container" style="border: 1px solid blue; width:100%">
   <div class="span2" style="border: 1px solid red">Foo!</div>
   <div class="span2" style="border: 1px solid red">Bar!</div>
   <div class="span2" style="border: 1px solid red">Baz!</div>
   <div class="span2" style="border: 1px solid red">Foo!</div>
   <div class="span2" style="border: 1px solid red">Bar!</div>
   <div class="span2" style="border: 1px solid red">Baz!</div>
</div>
</div>

<强>更新

<div class="row-fluid" style="border: 1px solid green">
<div class="container" style="border: 1px solid blue">
<div class="span2" style="border: 1px solid red">Foo!</div>
<div class="span2" style="border: 1px solid red">Bar!</div>
<div class="span2" style="border: 1px solid red">Baz!</div>
<div class="span2" style="border: 1px solid red">Foo!</div>
<div class="span2" style="border: 1px solid red">Bar!</div>
<div class="span2" style="border: 1px solid red">Baz!</div>
</div>
</div>