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.

Thanks for any help

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)

回答1:

I think this is what you're looking for from what I understood. I created a new class for each column and shifted it using the margins. You can adjust the margin % to fit your desired position.

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

回答2:

If you want to overlap all the time, instead of using grid you could use negative margins instead:

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

I resized images to fit inside snippet preview, but you will need only to play with negative margins to achieve effect you want.

回答3:

Do you mean something like the following:

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

Instead of using "col-4" use "col-sm-4" or here is the rule for column 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>

来源：https://stackoverflow.com/questions/52009312/overlap-columns-in-bootstrap-4