twitter-bootstrap - Twitter Bootstrap 跨度溢出

Question

http://jsfiddle.net/jgehrs/MgcDU/3103/

我有这个代码块，它应该导致 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>

编辑：这是一个显示问题的 jsFiddle。

Answer 1

流体布局适用于百分比。您可以尝试<div class="row-fluid">为我修复它。

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>

带边框的元素

Answer 3

您需要将该行包装在带有 class 的 div 中container。此外，将 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/

希望有帮助。

Answer 4

看看这是否接近你所追求的：http: //jsfiddle.net/panchroma/F7zRy/

正如@kyriakos 所指出的，如果你想要一个流体网格，你想使用它，如果你想让你的网格填充整个窗口，你<div class='row-fluid'>可以选择包裹所有东西。<div class="container-fluid">

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

祝你好运！