html - 如何在同一行重叠 bootstrap 3 中的列？

Question

我试图在 bootstrap 3 中实现这种效果:http://i.stack.imgur.com/BZRRC.png

Bootstrap 默认使用 12 列。如果当前行中的所有列宽加起来超过 12，则溢出的列将在“下一行”下方结束。

此时 div 看起来像这样:

<div class="row">
  <div class="col-md-4">
     ...[left window]
  </div>
  <div class="col-md-6 col-md-pull-1">
     ...[middle, bigger window]
  </div>
  <div class="col-md-4 col-md-pull-2">
     ...[right window]
  </div>
</div>

这是 14 列。中间的窗口与左边的窗口正确重叠。但是右侧窗口最终位于左侧窗口的下方，但向左两列。

有什么方法可以防止这种行为并将所有 col-md-* 保持在同一行，即使有超过 12 个(在本例中为 14 个)？

Answer 1

很确定一行中没有超过 12 列/跨度的方法。 但是，您可以在列内创建行以访问更多列，例如:

<div class="row">
  <div class="col-md-6">
     <div class="row">
          //12 columns here
     </div>
  </div>
  <div class="col-md-6">
     <div class="row">
          //12 columns here
     </div>
  </div>
</div>

这样他们仍然在“一”行。不过不确定它是否对您的效果有效。