it-roy-ru.com

Bootstrap: добавить поле/отступ между столбцами

Я пытаюсь поместить дополнительное пространство для полей/отступов между столбцами в моем сеточном макете Bootstrap. Я пробовал это но мне не нравится результат. Вот мой код:

    <div class="row">
        <div class="text-center col-md-6">
            Widget 1
        </div>
        <div class="text-center col-md-6">
            Widget 2
        </div>
    </div>

Я хочу добавить margin: 10px и padding:10px. Некоторые люди предлагают изменить свои классы на col-md-5 с помощью pull-left и pull-right, но разрыв между ними будет слишком большим.

44
bodruk

Обновление 2018

Bootstrap 4 теперь имеет утилиты разнесения , которые упрощают добавление (или вычитание) пробела (Gutter) между столбцами. Дополнительный CSS не требуется.

<div class="row">
    <div class="text-center col-md-6">
        <div class="mr-2">Widget 1</div>
    </div>
    <div class="text-center col-md-6">
        <div class="ml-2">Widget 2</div>
    </div>
</div>

Вы можете настроить поля для содержимого столбца с помощью таких утилит margin, как ml-0 (margin-left: 0), mr-0 (margin-right: 0), mx-1 (.25rem поля слева и справа ), так далее...

Или, вы можете настроить заполнение столбцов (col- *) с помощью утилит заполнение, таких как pl-0 (padding-left: 0) , pr-0 (padding-right: 0), px-2 (.50rem левый и правый отступ) и т. д.

Bootstrap 4 Column Spacing Demo

Заметки

  • Изменение левого/правого поля на col-* нарушит сетку.
  • Измените левую/правую границу (ы) на содержание col-* works.
  • Изменение левого/правого отступа на col-* также работает.
14
Zim

Просто добавьте div в col-md-6, который содержит дополнительные необходимые вам отступы. col-md-6 является «основой» для сохранения целостности столбца, но вы можете добавить в него дополнительные отступы.

<div class="row">
    <div class="text-center col-md-6">
        <div class="classWithPad">Widget 1</div>
    </div>
    <div class="text-center col-md-6">
        <div class="classWithPad">Widget 2</div>
    </div>
</div>

CSS

.classWithPad { margin:10px; padding:10px; }
82
Jon Harding

Я столкнулся с той же проблемой; и следующее работало хорошо для меня. Надеюсь, это поможет кому-то приземлиться здесь:

<div class="row">
  <div class="col-md-6">
    <div class="col-md-12">
     Set room heater temperature
   </div>
 </div>
 <div class="col-md-6">
   <div class="col-md-12">
     Set room heater temperature
   </div>
 </div>
</div>

 enter image description here

Это автоматически отрендерит некоторое пространство между 2 делениями.

12
krishna kinnera

Супер легко с flexbox. Оставьте место для некоторого пространства, изменив столбцы на col-md-5 

<div class="row widgets">
    <div class="text-center col-md-5">
        Widget 1
    </div>
    <div class="text-center col-md-5">
        Widget 2
    </div>
</div>

CSS

.widgets {
    display: flex;
    justify-content: space-around;
}
1
eosimosu

Просто добавьте класс justify-content-around. это автоматически добавит разрыв между 2 делениями.

Документация: https://getbootstrap.com/docs/4.1/layout/grid/#horizont-alignment

Образец:

<div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
</div>
1
Madhukar Hiriadka

Я бы оставил дополнительный столбец посередине для больших дисплеев и восстановил бы значение по умолчанию, когда столбцы сворачиваются на маленьких дисплеях. Что-то вроде этого:

    <div class="row">
        <div class="text-center col-md-5 col-sm-6">
            Widget 1
        </div>
        <div class="col-md-2">
            <!-- Gap between columns -->
        </div>
        <div class="text-center col-md-5 col-sm-6">
            Widget 2
        </div>
    </div>
1
thethakuri

Вы можете использовать классы Bootstrap 4 для отступов и полей следующим образом:

Для очень маленьких устройств, т. Е. Хз

{property}{sides}-{size}

Для других устройств/видовых экранов (маленький, средний, большой и очень большой)

{property}{sides}-{breakpoint}-{size}

Куда:

property = m for margin and p for padding

Ниже приведены сокращенные значения сторон:

l = defines the left-margin or left-padding
r = defines the right-margin or right-padding
t = defines the top-margin or top-padding
b = defines the bottom-margin or right-padding
x = For setting left and right padding and margins by the single call
y = For setting top and bottom margins
blank = margin and padding for all sides

Точка останова = sm, md, lg и xl.

Объединяя все вышеперечисленное, полный код левого отступа может быть (например):

Для левой прокладки в очень маленьких устройствах

пл-2

или для средних и очень больших

пл-мкр-2

0
karimeh

С другой стороны, если вы хотите удалить двойные отступы между столбцами, просто добавьте класс "nogap" внутри строки

<div class="row nogap">
    <div class="text-center col-md-6">Widget 1</div>
    <div class="text-center col-md-6">Widget 2</div>
</div>

и создать для него дополнительный класс CSS

.nogap > .col{ padding-left:7.5px; padding-right: 7.5px}
.nogap > .col:first-child{ padding-left: 15px; }
.nogap > .col:last-child{ padding-right: 15px; }

Вот и все, проверьте здесь: https://codepen.io/michal-lukasik/pen/xXvoYJ

0
mihau

Попробуй это:

 <div class="row">
    <div class="text-center col-md-6">
       <div class="col-md-12"> 
          Widget 1
       </div>
    </div>
    <div class="text-center col-md-6">
        <div class="col-md-12"> 
          Widget 2
        </div>
    </div>
</div>
0
omar faruque

Для тех, кто хочет контролировать пространство между динамическим числом столбцов, попробуйте:

<div class="row no-gutters">
    <div class="col">
        <div class="inner">
            <!-- content here -->
        </div>
    </div>
    <div class="col">
        <div class="inner">
            <!-- content here -->
        </div>
    </div>
    <!-- etc. -->
</div>

CSS:

.col:not(:last-child) .inner {
  margin: 2px; // Or whatever you want your spacing to be
}
0
Chris Haines