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>

这样他们仍然处于“一排”。但是不确定它是否会起作用。

Answer 2

据我所知，你不能用bootstrap开箱即用。相反，在最后一列中使用一个类并添加一个负余量。

这是HTML和bootstrap3的示例： http://cdpn.io/bAKfj

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

2 个答案: