0

在此处输入图像描述忙于实施包含响应式 CSS 文件的 Twitter Bootstrap，但这会导致我的 span 出现问题。整个宽度应该达到 span12，因此 6 * span2 也应该这样做。

现在这是有趣的部分。如果 bootstrap-responsive.css 没有加载，它确实有效，但是当我加载响应文件时，最后一个 span 浮动到左下角。

起初我以为它可能是我的边界，但我删除了它们，它仍然漂浮到底部。

            <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 文件未修改，而且我还没有构建自己的样式表，因此我认为这不是我做错的事情。

有任何想法吗？

谢谢！

科布斯

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

4

1 回答 1

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>
于 2012-12-02T13:49:42.630 回答