css - 如何在 Bootstrap 3 中重叠列？

Question

我想像这样创建具有两个重叠列的单行:

.row
  .col-sm-7
  .col-sm-6

这样网格的第 6 列就会重叠。

使用 .col-sm-pull-1 部分可行:

.row
  .col-sm-6
  .col-sm-6.col-sm-pull-1

但是第 12 列变为空。我试过:

.row
  .col-sm-6
  .col-sm-7.col-sm-pull-1

但是第二列移到下一行。

我找到了 Bootstrap 2 ( How to overlap columns using twitter bootstrap? ) 的答案。 Bootstrap 3 有可能吗？

Answer 1

在看到您的图片示例后，我想这也许就是您要找的东西。 (我让它们重叠 2 列，因为这样会更好地居中)

.blue{
    background-color: rgba(0,0,255,0.5);;
}
.row .red{
    background-color: rgba(255,0,0,0.5);
    position: absolute;
}
.red, .blue {
    height: 70px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="red col-xs-7"></div>
        <div class="blue col-xs-7 col-xs-push-5"></div>
    </div>
</div>