twitter-bootstrap 如何在 Bootstrap 3 中重叠列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33713284/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to overlap columns in Bootstrap 3?
提问by d3m0n
I'd like to create single row with two overlapping columns like that:
我想创建具有两个重叠列的单行，如下所示：
.row
.col-sm-7
.col-sm-6
so that 6th column of the grid is overlapped.
使网格的第 6 列重叠。
It's partially possible with a .col-sm-pull-1:
部分可能使用.col-sm-pull-1：
.row
.col-sm-6
.col-sm-6.col-sm-pull-1
but the 12th column becomes empty. I tried:
但第 12 列变为空。我试过：
.row
.col-sm-6
.col-sm-7.col-sm-pull-1
but the second column moves to the next row.
但第二列移动到下一行。
I found the answer for Bootstrap 2 (How to overlap columns using twitter bootstrap?). Is it possible with the Bootstrap 3?
我找到了 Bootstrap 2 的答案（如何使用 twitter bootstrap 重叠列？）。Bootstrap 3 有可能吗？
回答by turbopipp
After seeing your image example, I think perhaps this is what you are looking for. (I made them overlap 2 columns because that will center it better)
看到您的图像示例后，我想这可能就是您要寻找的。（我让它们重叠 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>回答by 1Bladesforhire
FiddleIf you want to overlap the two columns in one row, you'll need negative margins. The bootstrap gutters/margins are layed out using positive and negative margins. I would recommend ids for the columns and then you can use z-index if you want one over the other one. So change right margin on first and left margin on the second.
Fiddle如果您想在一行中重叠两列，则需要负边距。bootstrap 边距/边距使用正边距和负边距进行布局。我会推荐列的 id，然后如果你想要一个而不是另一个，你可以使用 z-index。因此，更改第一个的右边距和第二个的左边距。
margin-right: -5%;
margin-left: -5%;
How the grid worksis a great reference for how its built.
网格的工作原理是其构建方式的重要参考。
回答by NachoSupreme
You need to place the new column under the same div as the one you want to overlap.
您需要将新列与要重叠的列放在同一 div 下。
Here is an example
这是一个例子
<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>
Here's a jfiddle example: http://jsfiddle.net/NachoSupreme/o0fs78fv/
这是一个 jfiddle 示例：http: //jsfiddle.net/NachoSupreme/o0fs78fv/
