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>

Answer 2

Fiddle如果您想在一行中重叠两列，则需要使用负边距。使用正边距和负边距布置自举沟槽/边距。我建议列的ID，然后你可以使用z-index，如果你想要一个超过另一个。因此，在第二个上更改第一个和左边距的右边距。

margin-right: -5%; 
margin-left: -5%;

How the grid works是如何构建它的绝佳参考。

Answer 3

您需要将新列放在与要重叠的div相同的div下。

这是一个例子

<style>
.first {
background-color: #dedef8;
border: solid black 1px;
}

.second {
 background-color: #dedef8;
 border: solid black 1px;
}
</style>

<body>
 <div class="container">
  <div class="row">
    <div class="col-xs-7 first">
        <p>This is the first column</p>

     <div class="col-xs-6 second">
        <p>This is the second </p>   
     </div>
    </div>          
  </div>
 </div>
</body>

这是一个例子：http://jsfiddle.net/NachoSupreme/o0fs78fv/

如何重叠Bootstrap 3中的列？

3 个答案: