Подтвердить что ты не робот

Загрузочный лоток: добавьте пробел/пробел между столбцами

Я пытаюсь добавить лишние поля/пробелы между столбцами в моем макете сетки 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, но разрыв между ними будет слишком большим.

4b9b3361

ОТВЕТЫ

Ответ 1

Обновление 2018

Bootstrap 4 теперь имеет утилиты для разметки, которые упрощают добавление (или вычитание) пробела между столбцами. Дополнительный 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>

Вы можете настроить поля для содержимого столбца, используя такие значения полей, как 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 left и правый отступ) и т.д...

Bootstrap 4 Column Spacing Demo

Заметки

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

Ответ 2

Просто добавьте 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; }

Ответ 3

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

<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>

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

Это автоматически отобразит некоторое пространство между двумя div.

Ответ 4

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

Документация: https://getbootstrap.com/docs/4.1/layout/grid/#horizontal-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>

Ответ 5

Вы можете использовать классы 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

Ответ 6

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

    <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>

Ответ 7

Супер легко с 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;
}

Ответ 8

Попробуйте следующее:

 <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>

Ответ 9

В другом случае, если вам нравится удалять двойное заполнение между столбцами, просто добавьте класс "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

Ответ 10

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

<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
}

Ответ 11

Это сработало для меня:

Один из двух столбцов Один из двух столбцов

Ответ 12

У меня возникла та же проблема, и я решил ее, вложив div внутри начальной загрузки и добавив к нему padding. Что-то вроде:

<div class="container">
 <div class="row">
  <div class="col-md-4">
   <div class="custom-box">Your content with padding</div>
  </div>
  <div class="col-md-4">
   <div class="custom-box">Your content with padding</div>
  </div>
  <div class="col-md-4">
   <div class="custom-box">Your content with padding</div>
  </div>
 </div>
</div>

Ответ 13

Решение для кого-то вроде меня, когда клетки получили цвет фона

HTML

<div class="row">
        <div class="col-6 cssBox">
            a<br />ba<br />ba<br />b
        </div>
        <div class="col-6 cssBox">
            a<br />b
        </div>
</div>

CSS

.cssBox {
  background-color: red;
  margin: 0 10px;
  flex-basis: calc(50% - 20px);
}

Ответ 14

Попробуйте следующее:

<div class="row">
      <div class="col-md-5">
         Set room heater temperature
     </div>
     <div class="col-md-2"></div>
     <div class="col-md-5">
         Set room heater temperature
     </div>
</div>

Ответ 15

Для более любопытных я также обнаружил, что добавление

border: 5px solid white

или любой другой вариант, который вам нравится, чтобы он сливался, работает великолепно.