Контейнер полной ширины bootstrap - PullRequest
Новая
       123

Контейнер полной ширины bootstrap

0 голосов
/ 05 августа 2020

Я использую Bootstrap v5 alpha для создания простой панели инструментов.

Bootstrap говорит, что вы обязательно должны использовать .container, .container-fluid или некоторые .container-{size}, а затем использовать .row и .col столбцы. Но мне нужно, чтобы на приборной панели не было боковых полей и не было контейнера bootstrap без полей.

Что я могу сделать?

1 Ответ

0 голосов
/ 05 августа 2020

Хотя не существует встроенного компонента-контейнера Bootstrap, в котором отсутствуют поля, его легко реализовать с помощью служебных классов. Механизм немного изменился в Bootstrap 5.x, поскольку он удаляет класс .no-gutters, но все, что вам действительно нужно сделать, это:

  1. Удалить отступы по оси X из вашего .container
  2. Удалите прокладку оси X с вашего .row

Первое достигается с помощью px-0, а второе достигается с помощью .no-gutters (Bootstrap 4.x) или g-0 (Bootstrap 5.x) 

<div class="container-fluid bg-danger px-0">
  <div class="row g-0 bg-info">
    <div class="col bg-success"><p>Column #1</p></div>
    <div class="col bg-primary"><p>Column #2</p></div>
    <div class="col bg-warning"><p>Column #3</p></div>
  </div>
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

В приведенном выше примере кода вы заметите, что контейнер имеет класс bg-danger, но мы не видим красного фона. Мы также не видим применения к строке цвета bg-info. Это потому, что мы фактически удалили поля, которые по умолчанию в сетке Bootstrap установлены!

...