Блог

Я хотел разместить изображение на своем веб-сайте на всю ширину, и я заметил, что контейнер, в который помещается изображение, имеет поле размером 150 пикселей и отступ размером 15 пикселей автоматически с левой и правой стороны, поэтому изображение отображается в центре. Я пробовал различные способы его удаления, но ничего не получалось, у кого-нибудь есть решение для этого?

Вот мой код:

 <div class="container">
    <div class="row">
        <div class="col-12 mb-5">
            <img src="../../assets/business.jpg" class="img-fluid" alt="business">
        </div>
    </div>
</div>
  

1. Отказаться от использования .container или даже .container-fluid
2. Удалите отрицательные .row поля и горизонтальные отступы из всех непосредственных столбцов, добавив класс .no-gutters

 <div class="row no-gutters">
    <div class="col-12 mb-5">
        <img />
    </div>
</div>
  

демо: https://jsfiddle.net/davidliang2008/epw2vc8g/8/

 .nopadding {

   padding: 0 !important;

   margin: 0 !important;

}  

 <div class="col-md-8 nopadding">  

Ссылка: https://intellipaat.com/community/27892/remove-padding-from-columns-in-bootstrap-3

Использование .container-fluid этого позволит сохранить контейнер на всю ширину окна, а затем добавить .m-0.p-0 без полей или отступов для контейнера, строки и столбца. Затем используйте .w-100 img для ширины 100%.

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid m-0 p-0">
  <div class="row m-0 p-0">
    <div class="col-12 m-0 p-0 mb-5">
      <img src="https://www.k2bindia.com/wp-content/uploads/2013/03/bootstrap-1.jpg" class="w-100" alt="business">
    </div>
  </div>
</div>