Twitter Bootstrap跨度溢出

Question

我有一段代码，应该会显示4个等大小的span并且水平对齐，但是如你所见，第四个块被推到了新一行。我已经使用bootstrap几天了，这是我第一次遇到这种情况。

代码链接：http://jsfiddle.net/jgehrs/MgcDU/3103/

<div id='middle' class='row'>
  <div class='span3'>
    <div>1</div>
  </div>
  <div class='span3'>
    <div>2</div>
  </div>
  <div class='span3'>
    <div>3</div>
  </div>
  <div class='span3'>
    <div>4</div>
  </div>

编辑：这里是一个 jsFiddle，展示了这个问题。

- Jeremy Gehrs

---

有边框吗？那可能会破坏它。 - Scott Simpson

有一个1像素的边框，但是我去掉边框后得到了完全相同的结果。 - Jeremy Gehrs

你可能想要创建一个JSfiddle。如果不是边框的问题，也许是其他样式的问题。 - Scott Simpson

谢谢您的建议，我刚刚添加了JSfiddle链接。 - Jeremy Gehrs

Answer 1

流动布局使用百分比。你可以尝试使用<div class="row-fluid">，这为我解决了问题。

- porion

---

是的，看起来那就是问题所在。谢谢！ - Jeremy Gehrs

哇，谢谢你，文档中没有提到需要在 container-fluid 中使用 row-fluid。难怪我的列会溢出。 - Tyler Iguchi

在我的情况下，错误是客户将标题移动到了行部分。这个答案帮助我看到了它。因此，row-fluid是必要的，并且必须放在正确的位置;-) - Ralf

Answer 2

JSFiddle

在网格系统计算宽度后，添加边框的css会导致元素换行。我给内部div加了一个类，并将边框应用于内部元素。我还用一个div容器包装了该行，以获得固定布局。

.myBorder { border: 1px solid gray; }

<div class='container'>
<div class='row'>
  <div class='span3'>
    <div class="myBorder">1</div>
  </div>

具有边框的元素包装

（这是与Bootstrap相关的技术文章）

- Yack

---

对我来说仍然不起作用。将.container的宽度设置为300或500像素，以查看我的意思，它们会再次换行。难道Twitter Bootstrap的行/跨系统的整个重点不是将跨度分成百分比宽度，无论父容器宽度如何，或者我误解Bootstrap的网格系统应该做什么？ - Jeremy Gehrs

Answer 3

你需要将行用具有类container的div包装起来。此外，将div行的类更改为row-fluid，如下所示：

  <div class='container'>
    <div class='row-fluid'>
      <div class='span3'>
        <div>1</div>
      </div>
      <div class='span3'>
        <div>2</div>
      </div>
      <div class='span3'>
        <div>3</div>
      </div>
      <div class='span3'>
        <div>4</div>
      </div>
    </div>
  </div>

请在这里查看演示： http://jsfiddle.net/MgcDU/3107/

希望这有所帮助。

- psychobunny

Answer 4

看看这个是否接近您想要的：http://jsfiddle.net/panchroma/F7zRy/

正如@kyriakos所指出的，如果您想要一个流体网格，则应使用<div class='row-fluid'>，并且可以选择将所有内容包装在<div class="container-fluid">中，以使您的网格填充整个窗口。

最好不要使用边框，因为它们会增加列的额外宽度，并导致换行。如果需要使用边框，请使用border-box

祝你好运！

- David Taiaroa