logo标签列表

如何在Bootstrap 3中重叠列？

csstwitter-bootstraptwitter-bootstrap-3
6
我想创建一个包含两个重叠列的单行，如下所示：

.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 中找到了答案（如何使用 Twitter Bootstrap 重叠列？）。Bootstrap 3 是否也可以实现？
你是指“重叠”作为换行符吗？能否创建一个jsfiddle来重新制造这个问题？ - turbopipp
我不明白。boostrap网格只有12列...为什么是7 + 6？ - ScaisEdge
我想实现类似于这样的重叠效果：https://i-msdn.sec.s-msft.com/dynimg/IC554563.png - d3m0n
@scaisEdge 我想让7 + 6重叠以适应12 - d3m0n
你是否想在12列布局中拥有13列，使得其中2列重叠在中间？ - 1Bladesforhire
3个回答
10

在看了你的示例图片后，我认为也许这就是你要找的。我将它们重叠在两列上，因为这样会更好地居中。

.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>

3
如果您想在一行中重叠两列，则需要使用负边距。Bootstrap的间隔/边距是使用正负边距进行布局的。我建议为列使用id，然后如果您想要覆盖另一个，则可以使用z-index。因此，请将第一列的右边距和第二列的左边距更改。 Fiddle 
margin-right: -5%; 
margin-left: -5%;

网格系统是如何工作的 是一个关于它的构建原理的很好的参考。

这个答案比使用绝对位置好多了。谢谢！ - newLoop
1
你需要将新列放在与要重叠的列相同的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>

这里有一个 jsfiddle 的例子: http://jsfiddle.net/NachoSupreme/o0fs78fv/

你说的部分正确。包含是一种重叠的形式，但我正在寻找一种列部分重叠的解决方案。 - d3m0n
我认为我在另一个帖子中找到了你问题的答案。http://stackoverflow.com/questions/31121288/overlapping-rows-columns-using-bootstrap-grid 看看吧。 - NachoSupreme
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接