как добавить пробел между столбцом BOOTSTRAP 4

Question

Как добавить пробел между этими двумя столбцами.

<div class="row ">
    <div class="col-md-6 shadow">
            ...
    </div>
    <div class="col-md-6  shadow ">
            ...
    </div>
</div>

Answer 1

Это зависит от вашего желания. Вы можете добавить пробел между HTML элементами, используя поля и отступы (блочная модель) . В bootstrap это возможно для m-0 - m-5 для маржи и p-0 - p-5. Вы также можете указать положение и размер для разных видов. Подробнее подробная информация

Помните: заполнение - это смещение внутреннего содержимого. Поля имеют внешнее смещение и могут нарушить ваш макет (столбец 6 + 5 больше сетки 6 столбцов)

Answer 2

Нет простого способа добавить пользовательские поля в столбцы bootstrap, не нарушая поведение его сетки на разных интервалах реагирования.

Вы можете использовать offset-* служебные классы, но это фактически сместит это столбец по количеству столбцов, а не по случайному количеству пикселей.

Грубый пример его использования будет:

<div class="row">
  <div class="col-md-5 shadow">
    ...
  </div>
  <div class="col-md-5 shadow offset-md-2">
    ...
  </div>
</div>

---

До настоящего времени Самый простой способ сделать это - поместить обертку в столбец и использовать для этого поля. В вашем случае, я думаю, вы хотите, чтобы пространство между ними хорошо отрисовывалось, поэтому просто создайте дополнительный <div> и переместите на него .shadow:

<div class="row ">
    <div class="col-md-6">
       <div class="shadow">
          ...
       </div> 
    </div>
    <div class="col-md-6">
       <div class="shadow">
          ...
       </div>
    </div>
</div>

Теперь поиграйте с * Поле 1019 * легко и не нарушает сетку.