Как я могу поместить маржу между div в bootstrap?

Я только начал работать над дизайном bootstrap css, я хочу поместить некоторый размер 5px между созданным ящиком i, и этот марж должен быть Constant, если я re size browsers

my html выглядит так:

<div class="container">
        <div class="row">
            <div class="col-md-3  col-sm-6 col-xs-12">
                <div style="height: 121px; background-color: orange; width:100%;">
                    <label>Box 1</label>
                </div>
            </div>
            <div class="col-md-2 col-sm-6 col-xs-12">
                <div style="height: 121px;background-color: wheat; width:100%;">
                    <label>Box 2</label>
                </div>
            </div>
            <div class="col-md-2 col-sm-6 col-xs-12">
                <div style="height: 121px;background-color: beige ;width:100%;">
                    <label>Box 3</label>
                </div>
            </div>
            <div class="col-md-2 col-sm-6 col-xs-12">
                <div style="height: 121px;background-color: chocolate; width:100%;">
                    <label>Box 4</label>
                </div>
            </div>
        </div>
                </div>

поэтому в выше html я использовал div с цветами фона. и я хочу поставить некоторый запас между ними.

Ответ 1

Проблема с вашим кодом в bootstrap заключается в том, что столбцы (<div class="col-*"></div>) имеют настраиваемое дополнение. Всегда всегда будет равная ширина между вашими div, но не всегда равная высота (если вы не начнете добавлять строки бутстрапа, которые обрабатываются одинаково вертикально, а столбцы - горизонтально с заполнением).

Чтобы решить эту проблему в вашем случае, вам просто нужно добавить дополнение к своим div. DEMO

 <div class="container">
    <div class="row">
        <div class="col-md-2  col-sm-6 col-xs-12" style="padding-top: 5px;">
            <div style="background-color: orange;">
                <label>Box 1</label>
            </div>
        </div>
        <div class="col-md-2 col-sm-6 col-xs-12" style="padding-top: 5px;">
            <div style="background-color: wheat; ">
                <label>Box 2</label>
            </div>
        </div>
        <div class="col-md-2 col-sm-6 col-xs-12" style="padding-top: 5px;">
            <div style="background-color: beige; ">
                <label>Box 3</label>
            </div>
        </div>
        <div class="col-md-2 col-sm-6 col-xs-12" style="padding-top: 5px;">
            <div style="background-color: chocolate;">
                <label>Box 4</label>
            </div>
        </div>
    </div>
</div>

Ответ 2

Почему бы не использовать css с margin-bottom:5px;?

.col-xs-12{
    margin-bottom: 5px;  
}

<div class="container">
    <div class="row">
        <div class="col-md-3  col-sm-6 col-xs-12">
            <div style="height: 121px; background-color: orange; width:100%;">
                <label>Box 1</label>
            </div>
        </div>
        <div class="col-md-2 col-sm-6 col-xs-12">
            <div style="height: 121px;background-color: wheat; width:100%;">
                <label>Box 2</label>
            </div>
        </div>
        <div class="col-md-2 col-sm-6 col-xs-12">
            <div style="height: 121px;background-color: beige ;width:100%;">
                <label>Box 3</label>
            </div>
        </div>
        <div class="col-md-2 col-sm-6 col-xs-12">
            <div style="height: 121px;background-color: chocolate; width:100%;">
                <label>Box 4</label>
            </div>
        </div>
    </div>
</div>

Ответ 3

Я попробовал просто положить некоторые перерывы. Это то, что вы искали?

<div class="container">
  <div class="row">
    <div class="col-md-3  col-sm-6 col-xs-12">
      <div style="height: 121px; background-color: orange; width:100%;">
        <label>Box 1</label>
      </div>
    </div>
    <br>
    <div class="col-md-2 col-sm-6 col-xs-12">
      <div style="height: 121px;background-color: wheat; width:100%;">
        <label>Box 2</label>
      </div>
    </div>
    <br>
    <div class="col-md-2 col-sm-6 col-xs-12">
      <div style="height: 121px;background-color: beige ;width:100%;">
        <label>Box 3</label>
      </div>
    </div>
    <br>
    <div class="col-md-2 col-sm-6 col-xs-12">
      <div style="height: 121px;background-color: chocolate; width:100%;">
        <label>Box 4</label>
      </div>
    </div>
  </div>
  <br>
</div>

Ответ 4

Следуя каноническому способу добавления поля и заполнения в Bootstrap, вы можете сделать это.

Формат классов:

{property}{sides}-{size} для xs
{property}{sides}-{breakpoint}-{size} для sm, md, lg и xl.

Где property является одним из:

m - для классов, задающих margin
p - для классов, которые устанавливают дополнение

Где sides является одним из:

t - для классов, которые задают margin-top или padding-top
b - для классов, которые устанавливают margin-bottom или padding-bottom
l - для классов, которые задают margin-left или padding-left
r - для классов, которые задают margin-right или padding-right
x - для классов, которые устанавливают как * -left, так и * -right
y - для классов, которые устанавливают оба * -top и * -bottom
blank - для классов, которые устанавливают маржи или отступы на всех 4 сторонах элемента

Где size является одним из:

0 - для классов, которые устраняют поле или дополнение, устанавливая его на 0
1 - (по умолчанию) для классов, которые устанавливают маржи или отступ в $spacer *.25
2 - (по умолчанию) для классов, которые устанавливают маржи или отступ в $spacer *.5
3 - (по умолчанию) для классов, которые задают маржи или отступы для $spacer
4 - (по умолчанию) для классов, которые устанавливают маржи или отступ в $spacer * 1.5
5 - (по умолчанию) для классов, которые устанавливают маржи или отступ в $spacer * 3

<сильные > Примеры

Прокладка * 1,5 со всех сторон: <div class="p-4">
Значение по умолчанию: <div class="mt-3">
Заполнение * 0.25 слева и справа: <div class="px-1">

Дополнительная информация на их странице в разделе "Утилиты" > "Интервал": https://getbootstrap.com/docs/4.0/utilities/spacing/