Question

我在Bootstrap 3中有两列，其中一列有几张图像，另一列有一张大图像。我想要一个列 - 具有多个图像的列 - 与另一个列部分重叠，因此一个图像与其他三个图像重叠。如果我尝试这个，大图像会向下或向上移动。这是一种重叠这些列的方法吗？由于页面的其余部分，不可能将两个图像放在同一列中。

代码：

<div class="col-md-6 col-md-offset-3">
 <div class="col-md-4 col-md-pull-2">
  <!-- three images -->
 </div>
 <div class="col-md-6">
  <!-- bit image -->
 </div>
 <div class="col-md-6">
  <!-- other bit image -->
 </div>
</div>

任何人都可以帮助我吗？

Answer 1

列本身永远不会在同一平面上重叠。它们可以放在彼此之上，但只有最顶层会占据给定的像素。

然而，您可以overflow图像，因此它们会扩展到所提供的空间之外。请参阅：https://jsfiddle.net/q9dn808p/1/ [使用了可怕的图像]

问题并非100％明确，因此建议按照评论中的说明进行修正。解决您的解决方案的其他属性是z-index，与position: fixed或position:absolute相关联，可将较大的图片标记到页面的某一侧。</ p>

Answer 2

您可以将它们叠加，使边距值小于0.

#left-picture{
  margin-right: -50px;
}

https://jsfiddle.net/q9dn808p/2/

这是你在找什么？

我可以在Bootstrap 3中使用部分重叠的列

2 个答案: