Как добавить отступ в 3 пикселя между столбцами начальной загрузки

Я хочу добавить пространство между блоками. Я использую систему начальной загрузки.

когда я добавляю поле, третий div попадает под блок 1.

ниже мой код:

введите здесь описание изображения

<div style='border:solid black 1px' class='col-md-6'>
  <h1>Block 1</h1>
</div>
<div style='border:solid black 1px' class='col-md-3'>
  <h1>Block 2</h1>
</div>
<div style='border:solid black 1px' class='col-md-3'>
  <h1>Block 3</h1>
</div>

css margins bootstrap-grid
person Ali Al Amine    schedule 09.08.2020    source источник
comment
добавить классы утилиты начальной загрузки mr-1 или ml-1 в столбцы   -  person Noman Gul    schedule 09.08.2020

Ответы (2)


arrow_upward
0
arrow_downward

Вам нужно будет использовать класс col-md и, возможно, mx-md-1 или установите маржу самостоятельно.

вот пример для запуска на всю страницу, чтобы изменить размер и увидеть эффект точек останова:

.row {/* for demo to show where is center & where it stands */
  border: solid;
  background: linear-gradient(to right, #4564 50%, #0008 50%)
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div style='border:solid black 1px' class=' col-md-6 '>
      <h1>Block 1</h1>
    </div>
    <div style='border:solid black 1px' class='  col-md mx-md-1'>
      <h1>Block 2</h1>
    </div>
    <div style='border:solid black 1px' class='  col-md-3 '>
      <h1>Block 3</h1>
    </div>
  </div>
</div>

col/col-sm/col-md/col-lg/col-xl классы будут использовать доступное пространство без установки ширины, только точки останова.

person G-Cyrillus    schedule 09.08.2020

arrow_upward
0
arrow_downward

Вы можете добавить интервалы между столбцами в системе Grid Bootstrap, используя классы смещения, как и в вашем примере:

<div style='border:solid black 1px' class='col-md-7'>
  <h1>Block 1</h1>
</div>
<div style='border:solid black 1px' class='col-md-3 offset-md-1'>
  <h1>Block 2</h1>
</div>
<div style='border:solid black 1px' class='col-md-3 offset-md-1'>
  <h1>Block 3</h1>
</div>

Хотя вы не можете выбрать точное количество пикселей для этого интервала, вы должны довольствоваться единицами Bootstrap (от 1 до 12 в конце класса).

person Overthane    schedule 09.08.2020