Перекрытие столбцов в начальной загрузке 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 {
  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>

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» используйте «col-sm-4» или вот правило для столбца , нажмите

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