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>

Elements with Borders Wrap

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/

希望有所帮助。

Answer 4

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

正如@kyriakos所说，如果你想要一个流畅的网格，你想要使用<div class='row-fluid'>，如果你想让网格填满整个窗口，你可以选择用<div class="container-fluid">包裹所有内容。

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

祝你好运！