Twitter bootstrap 推特引导跨越了溢出

我有这段代码，这将导致4个大小相同的跨距水平排列，但正如您所看到的，第4个块被下推到新行。我已经使用bootstrap好几天了，这是我第一次看到这个

<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>

1.
2.
3.
4.

编辑：下面是一个JSFIDLE，显示了这个问题

css添加边框是在网格系统计算宽度并使元素换行后完成的。我在内部div上放置了一个类，并将边框应用于内部元素。我还将该行包装在一个div容器中，以使其具有固定的布局

.myBorder { border: 1px solid gray; }

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

.myBorder{border:1px实心灰色；}
1.

---

流体布局使用百分比。您可以尝试为我修复它。

看看这是否接近您的目标：

正如@kyriakos所指出的，如果您想要流体网格，您需要使用

，如果您想要网格填充整个窗口，还可以选择使用

包装所有内容

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

---

祝你好运

您需要使用class

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>

1.
2.
3.
4.

请看这里的演示：

---

希望有帮助。

有边界吗？这可能会破坏它。有一个1px的边框，但我得到的结果完全相同，没有边框。您可能想制作一个JSFIDLE。如果不是border，可能是另一种风格。谢谢你的建议，我刚刚添加的JSFIDLE链接仍然不适合我。将.container的宽度设置为300或500px以了解我的意思，它们会再次包装。Twitter引导的row/span系统的全部目的不是将跨度分割成百分比宽度，而不管父容器的宽度是什么，还是我误解了引导的网格系统应该做什么？是的，看起来这就是问题所在。谢谢哇，谢谢你这么做，在文档中没有提到你需要行流体和容器流体。难怪我的列会溢出在我的例子中，错误是客户机将标题移动到了行部分。这个答案帮助我明白了这一点。因此，row流体是必要的，并且必须位于正确的位置；-）