为什么3个span4 bootstrap div将第三个推送到新的一行

Question

我认为bootstrap基于12列网格系统。但是以下代码：

  <div class="container">
    <div class="row">
       <div class="example-box span4">Example Text</div>
       <div class="example-box span4">Example Text</div>
       <div class="example-box span4">Example Text</div>
    </div>
  </div>

始终将最后一个div向下推到下一行，同时将另外两个保持在同一行。我在这里错过了什么吗？删除最后一个框的右边缘似乎也不起作用。

Answer 1

您的example-box类可能包含导致Bootstrap模型中断的框模型属性。最可能的解决方案是使用内部div元素，在其上应用自定义CSS类，如下所示：

<div class="container">
   <div class="row">
      <div class="span4">
          <div class="example-box">Example Text</div>
      </div>
      <div class="span4">
          <div class="example-box">Example Text</div>
      </div>
      <div class="span4">
          <div class="example-box">Example Text</div>
      </div>
   </div>
</div>

Answer 2

如果您在任何span4中添加了填充或边框，则会导致这种情况发生。

Answer 3

也许你的代码中没有css重置？这可能会导致它将最后一个div推到下一行。只是一个想法。