我想要一些盒子来填满所有东西，我正在使用 Twitter Bootstrap答案

【问题标题】：I want some boxes to fill everything, Im using Twitter Bootstrap我想要一些盒子来填满所有东西，我正在使用 Twitter Bootstrap
【发布时间】：2025-12-21 12:20:14
【问题描述】：

我希望我的流体盒能够容纳所有内容。这就是我现在得到的：

这就是我要找的：

我正在使用 Twitter 引导程序。

这里是 jsfiddle，和我的布局一模一样：

http://jsfiddle.net/jUQEc/

当前的 html 标记：

<div class="container-narrow">

      <h4 class="title">Featured Companies</h4>

      <div class="row-fluid" id="container" class="js-masonry" data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'>
        <div class="span6 item">
          <h4 class="title">Company Details</h4>
          <div class="box">
            test
          </div>
        </div>
        <div class="span3 item">
          <h4 class="title">Company News</h4>
          <div class="box">
            test<br>test<br>testtest<br>test<br>testtest<br>test<br>testtest<br>test<br>test
          </div>
        </div>
        <div class="span3 item">
          <h4 class="title">Company News</h4>
          <div class="box">
            test<br>test<br>testtest<br>test<br>testtest<br>test<br>testtest<br>test<br>test
          </div>
        </div>

        <div class="span4 item">
          <h4 class="title">Company News</h4>
          <div class="box">
            test<br>test<br>test
          </div>
        </div>

      </div>

    </div>

谢谢。

【问题讨论】：

查看这里masonry.desandro.com
@Andrevinsky，我用 jsfiddle 更新了问题。
6 + 3 + 3 + 4 = 16 您使用的是 16 列网格吗？考虑所需结构的左侧部分包含 span6>div.row-fluid>((div.row-fluid>div.span12)+(div.row-fluid>div.span12))
不，Sherlock。我知道。我希望前三个框成一行显示，第四个在它们下方。插图与代码不完全相同。
Amar，你可以嵌套 div.row-fluid>(div.spanX+div.spanY) 到无穷大。您正在寻找：第 1 行：（第 1 列：（第 1 行：（第 1 列：100%），第 2 行：（第 1 列：100%）），第 2 列：（右侧部分））twitter.github.io/bootstrap/scaffolding.html跨度>

标签： javascript html css twitter-bootstrap responsive-design

【解决方案1】：

您应该在第三个框上设置一个宽度，然后将其浮动。如果合适，它会偷偷爬上去填满你要找的空间。也许你应该复习一下浮动是如何工作的，并看看它是如何应用于引导程序中的 div 的。希望这可以帮助！

【讨论】：