Блог

Я пытаюсь создать макет, который имеет 4 столбца в строке с разной шириной, но также должен занимать около 70-80% страницы. Но как только я устанавливаю ширину родительского контейнера или добавляю поля в контейнер, содержимое внутри строк сетки начинает перекрывать другие столбцы, как мне это предотвратить?

 <style>

    .instructions-wrapper {
        text-align: center;
        margin: 0 5%; /*if I delete this row, it all works as expected. I tried width: 80%, same things happens.*/
    }

    .one {
        background-color: red;
    }

    .two {
        background-color: yellow;
    }
    
    .three {
        background-color: blue;
    }

    .four {
        background-color: purple;
    }


</style>

<div class="instructions-wrapper">
    <h1>text</h1>
    <div class="container">
        <div class="row">
            <div class="col-lg-1 one">
                2019
            </div> 
            <div class="col-lg-2 two">
                <img src="https://via.placeholder.com/100"> 
            </div>
            <div class="col-lg-7 three">
                text
            </div>
            <div class="col-lg-2 four">
                text
            </div>
        </div>
    </div>
</div>
  

Поле уменьшает контейнер, и это делает столбцы слишком маленькими для содержимого, поэтому они должны перекрываться.

Например, вы даете столбцу «два» 2 части сетки, а ваше изображение составляет 100 пикселей.

• Если ваш контейнер равен 1200 пикселям. тогда 2 части равны 200 пикселям, включая отступ, который равен 30 пикселям.
• Если контейнер имеет ширину 780 пикселей, то 2 части равны 130 пикселям — это полная ширина вашего изображения и отступов
• итак, если ваш контейнер становится меньше 780 пикселей, то эта ячейка сетки начнет перекрываться.

Это ваш код, использующий width:80% , и когда вы смотрите на него на полной странице, он все еще работает. Итак, ваш контейнер становится слишком маленьким.

 .instructions-wrapper {
  text-align: center;
  width:80%;
}

.one {
  background-color: red;
}

.two {
  background-color: yellow;
}

.three {
  background-color: blue;
}

.four {
  background-color: purple;
}  

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="instructions-wrapper">
  <h1>text</h1>
  <div class="container">
    <div class="row">
      <div class="col-lg-1 one">
        2019
      </div>
      <div class="col-lg-2 two">
        <img src="https://via.placeholder.com/100">
      </div>
      <div class="col-lg-7 three">
        text
      </div>
      <div class="col-lg-2 four">
        text
      </div>
    </div>
  </div>
</div>