引导程序4中的重叠列

Question

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

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

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

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

感谢您的帮助

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

Answer 1

不要使用“ col-4”，而要使用“ col-sm-4”，或者这是列click的规则

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <section>
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <img class="img-fluid" src="https://via.placeholder.com/321x620" alt="" />
                </div>
                <div class="col-sm-4">
                    <img class="img-fluid" src="https://via.placeholder.com/321x620" alt="" />
                </div>
                <div class="col-sm-4">
                    <img class="img-fluid" src="https://via.placeholder.com/321x620" alt="" />
                </div>
            </div>
        </div>
    </section>

Answer 2

我认为这是您根据我的理解所寻找的。我为每列创建了一个新类，并使用边距对其进行了平移。您可以调整边距百分比以适合您的期望位置。

<style>
.a1 {
    margin-left: 15%;
    position: absolute;
}
.a2 {
    margin-left: 30%;
    margin-top: 5%;
    position: absolute;
    z-index: 3;
}
.a3 {
    margin-left: 45%;
    position: absolute;
}
</style>

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

Answer 3

如果您想一直重叠，可以使用负边距代替使用网格：

.bottle {
  width: 100px;
  height: auto;
  border: 1px solid black;
}

.bottles .bottle:first-child {
  margin-right: -30px;
}

.bottles .bottle:last-child {
  position: relative;
  margin-left: -30px;
  z-index: -1;
}

<div class="bottles">
  <img class="bottle" src="https://via.placeholder.com/321x620">
  <img class="bottle" src="https://via.placeholder.com/321x620">
  <img class="bottle" src="https://via.placeholder.com/321x620">
</div>

我调整了图像的大小以适合片段预览，但是您只需要使用负边距即可达到想要的效果。

Answer 4

您的意思是否如下：

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