引导程序4中的重叠列 [英] Overlap columns in bootstrap 4

问题描述

我有一排，里面有三列，像这样:

I have one row inside which I have three columns like this:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<section>
  <div class="container">
    <div class="row">
      <div class="col-4">
        <img class="img-fluid" src="https://via.placeholder.com/321x620" alt="" />
      </div>
      <div class="col-4">
        <img class="img-fluid" src="https://via.placeholder.com/321x620" alt="" />
      </div>
      <div class="col-4">
        <img class="img-fluid" src="https://via.placeholder.com/321x620" alt="" />
      </div>
    </div>
  </div>
</section>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

我希望三列重叠并创建并产生如下幻觉:

I would like the three columns to overlap and create and illusion like the the following:

每个瓶子将代表上面代码段中的每个图像.

Where each bottle will represent each of the image that I have in the code snippet above.

感谢您的帮助

注意:中间的图像应该显示在前面，并且比后面的其他两个图像大(如图所示)

Note The image in the middle should appear to be in the front and bigger than the other two images in the back (exactly as shown in the picture)

推荐答案

您的意思是这样的吗?

.col-4 {
  position: relative;
}

.col-4:nth-child(1), .col-4:nth-child(3) {
  z-index: 1;
}

.col-4:nth-child(2) {
  margin: 0 -40px 0 -40px;
  z-index: 2;
}

.img-fluid {
  width: 321px;
  height: 620px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<section>
  <div class="container">
    <div class="row">
      <div class="col-4">
        <img class="img-fluid" src="https://cdn.pixabay.com/photo/2018/08/21/23/29/fog-3622519_960_720.jpg" alt="" />
      </div>
      <div class="col-4">
        <img class="img-fluid" src="https://cdn.pixabay.com/photo/2012/08/27/14/19/evening-55067_960_720.png" alt="" />
      </div>
      <div class="col-4">
        <img class="img-fluid" src="https://cdn.pixabay.com/photo/2015/01/07/15/51/woman-591576_960_720.jpg" alt="" />
      </div>
    </div>
  </div>
</section>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

这篇关于引导程序4中的重叠列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！