2

Есть ли в bootstrap обертка (wrapper) для странички(HTML)?
Может быть неправильно задал вопрос, но мне нужно сделать общий padding для странички.

2 ответа 2

4
  1. У бутстрапа нет общей обертки.

  2. Если вы хотите задать вертикальный внутренний отступ, то спокойно можете добавить его к body.

  3. Если вы хотите задать горизонтальный отступ:

a) Если вы планируете сделать отступ больше чем половина gutter, то можете просто добавить эти отступы для container. В 4 бутстрапе только для отступов есть отдельные классы. Таким образом вы можете обойтись только средствами бутсрап:

span {
  display: block;
  padding: 5px;
  margin-top: 5px;
  border: 1px solid #ddd;
  background: #eee;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<div class="container pl-5 pr-5">
  <div class="row">
    <div class="col">
      <span>1 of 2</span>
    </div>
    <div class="col">
      <span>2 of 2</span>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <span>1 of 3</span>
    </div>
    <div class="col">
      <span>2 of 3</span>
    </div>
    <div class="col">
      <span>3 of 3</span>
    </div>
  </div>
</div>

б) Можно поменять в переменных основной отступ - тогда изменятся паддинги у контейнера, маргины у row, и паддинги у col и соответсвенно изменится отступ между колонками. В третьем бустрапе для этого можно воспользоваться кастомизатором.

в) Если вы планируете сделать отступ меньше чем половина gutter и оставить прежнее расстояние между колонками, тогда можно обернуть содержимое во wrapper c отрицательным оступом и добавить странице горизонтальный overflow, тогда следует помнить, что содержимое может обрезаться и чуть внимательнее относитесь к этому при тестировании.

г) Так же в бустрапе есть возможность делать колонки без отступа .no-gutter - тогда ваши паддинги у контейнера могут быть любой ширины.

2

Судя по поиску его там нет, вы это можете проверить простым поиском в файлах bootstrap. Остаётся только создать самому.

1
  • Т.е. посоветуете для каждой секции делать внутренний margin? на примере наглядниее спрошу: .container. > . row > .(мой класс с margin left/right ) > .col-md- 4 + .col-md- 8. 18 дек 2017 в 10:22

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.