Bootstrap: добавление разрывов между divs

Если моя страница использует класс Bootstrap row, col-md-x и, таким образом, для упорядочивания контента, каков будет правильный способ создания расстояния между каждым div, содержащим весь элемент семантически?

Я добавляю div с дополнением между divs для имитации пробела, это хорошая тактика или есть лучший?

Ответ 1

Добавление отступов между div для имитации пробела может быть взломом, но почему бы не использовать что-то, что предлагает Bootstrap. Это называется смещениями. Но опять-таки вы можете определить класс в custom.css (вы все равно не должны редактировать основной файл стилей) и добавить что-то вроде .gap. Тем не менее, .col-md-offset-* выполняет большую часть работы для меня, что позволяет мне точно оставить пробел между div.

Что касается вертикального интервала, к сожалению, в Bootstrap 3 нет встроенного встроенного модуля, поэтому для этого вам придется изобретать свой собственный пользовательский класс. Обычно я делал что-то вроде .top-buffer { margin-top:20px; }. Это делает трюк, и, очевидно, он не должен быть 20px, это может быть все, что вам нравится.

Ответ 2

Мне потребовался только один экземпляр вертикальной прокладки, поэтому я вставил эту строку в нужное место, чтобы не добавлять больше к css. <div style="margin-top:5px"></div>

Ответ 3

Начиная с Bootstrap v4, вы можете просто добавить следующее в свой атрибут класса DIV: mt-2 (край верхнего края 2)

<div class="mt-2 col-md-12">
        This will have a two-point top margin!
</div>

В документах приводятся дополнительные примеры: Bootsrap v4 docs

Ответ 4

Альтернативный способ выполнить то, что вы просите, без проблем на мобильной версии вашего сайта (помните, что атрибут margin будет тормозить ваш отзывчивый макет на мобильной версии, таким образом, вы должны добавить на ваш элемент дополнительный атрибут, например @media (min-width:768px){ 'your-class'{margin:0}}, чтобы переопределить предыдущий запас)

заключается в том, чтобы вложить ваш класс в ваш предпочтительный div, а затем добавить в свой класс вариант поля, который вы хотите

как в следующем примере: HTML

<div class="container">
  <div class="col-md-3 col-xs-12">
   <div class="events">
     <img src="..."  class="img-responsive" alt="...."/>
     <div class="figcaption">
       <h2>Event Title</h2>
       <p>Event Description.</p>
     </div>
   </div>
  </div>
  <div class="col-md-3 col-xs-12">
   <div class="events">
    <img src="..."  class="img-responsive" alt="...."/>
    <div class="figcaption">
     <h2>Event Title</h2>
     <p>Event Description. </p>
    </div>
   </div>
  </div>
  <div class="col-md-3 col-xs-12">
   <div class="events">
    <img src="..."  class="img-responsive" alt="...."/>
    <div class="figcaption">
     <h2>Event Title</h2>
     <p>Event Description. </p>
    </div>
   </div>
  </div>
</div>

И на вашем CSS вы просто добавите параметр поля в свой класс, который в этом примере представляет собой "события", например:

.events{
margin: 20px 10px;
}

По этому методу у вас будет все необходимое пространство между вашими div, чтобы вы не затормозили что-либо на своем мобильном и планшетном ПК.