it-roy-ru.com

Есть ли в bootstrap встроенные классы padding и margin?

Есть ли в Bootstrap встроенные классы padding и margin, такие как pad-10, mar-left-10, или я должен добавить свои собственные классы? Например, аналогично тем, которые здесь на вкладках отступов и полей.

22
Ozgur Erdogan

Есть встроенные классы, а именно:

.padding-xs { padding: .25em; }
.padding-sm { padding: .5em; }
.padding-md { padding: 1em; }
.padding-lg { padding: 1.5em; }
.padding-xl { padding: 3em; }

.padding-x-xs { padding: .25em 0; }
.padding-x-sm { padding: .5em 0; }
.padding-x-md { padding: 1em 0; }
.padding-x-lg { padding: 1.5em 0; }
.padding-x-xl { padding: 3em 0; }

.padding-y-xs { padding: 0 .25em; }
.padding-y-sm { padding: 0 .5em; }
.padding-y-md { padding: 0 1em; }
.padding-y-lg { padding: 0 1.5em; }
.padding-y-xl { padding: 0 3em; }

.padding-top-xs { padding-top: .25em; }
.padding-top-sm { padding-top: .5em; }
.padding-top-md { padding-top: 1em; }
.padding-top-lg { padding-top: 1.5em; }
.padding-top-xl { padding-top: 3em; }

.padding-right-xs { padding-right: .25em; }
.padding-right-sm { padding-right: .5em; }
.padding-right-md { padding-right: 1em; }
.padding-right-lg { padding-right: 1.5em; }
.padding-right-xl { padding-right: 3em; }

.padding-bottom-xs { padding-bottom: .25em; }
.padding-bottom-sm { padding-bottom: .5em; }
.padding-bottom-md { padding-bottom: 1em; }
.padding-bottom-lg { padding-bottom: 1.5em; }
.padding-bottom-xl { padding-bottom: 3em; }

.padding-left-xs { padding-left: .25em; }
.padding-left-sm { padding-left: .5em; }
.padding-left-md { padding-left: 1em; }
.padding-left-lg { padding-left: 1.5em; }
.padding-left-xl { padding-left: 3em; }

.margin-xs { margin: .25em; }
.margin-sm { margin: .5em; }
.margin-md { margin: 1em; }
.margin-lg { margin: 1.5em; }
.margin-xl { margin: 3em; }

.margin-x-xs { margin: .25em 0; }
.margin-x-sm { margin: .5em 0; }
.margin-x-md { margin: 1em 0; }
.margin-x-lg { margin: 1.5em 0; }
.margin-x-xl { margin: 3em 0; }

.margin-y-xs { margin: 0 .25em; }
.margin-y-sm { margin: 0 .5em; }
.margin-y-md { margin: 0 1em; }
.margin-y-lg { margin: 0 1.5em; }
.margin-y-xl { margin: 0 3em; }

.margin-top-xs { margin-top: .25em; }
.margin-top-sm { margin-top: .5em; }
.margin-top-md { margin-top: 1em; }
.margin-top-lg { margin-top: 1.5em; }
.margin-top-xl { margin-top: 3em; }

.margin-right-xs { margin-right: .25em; }
.margin-right-sm { margin-right: .5em; }
.margin-right-md { margin-right: 1em; }
.margin-right-lg { margin-right: 1.5em; }
.margin-right-xl { margin-right: 3em; }

.margin-bottom-xs { margin-bottom: .25em; }
.margin-bottom-sm { margin-bottom: .5em; }
.margin-bottom-md { margin-bottom: 1em; }
.margin-bottom-lg { margin-bottom: 1.5em; }
.margin-bottom-xl { margin-bottom: 3em; }

.margin-left-xs { margin-left: .25em; }
.margin-left-sm { margin-left: .5em; }
.margin-left-md { margin-left: 1em; }
.margin-left-lg { margin-left: 1.5em; }
.margin-left-xl { margin-left: 3em; }
19
Guest

Bootstrap 4 имеет новое обозначение для полей margin и padding. Обратитесь к Документация по Bootstrap 4.0 - Интервалы .

Из документации:

Обозначение

Утилиты разнесения, которые применяются ко всем точкам останова, от xs до xl, имеют в них нет аббревиатуры точек останова. Это потому, что эти классы применяется от min-width: 0 и выше и, таким образом, не связаны носителем запрос. Остальные точки останова, однако, включают точку останова сокращение.

Классы именуются в формате {property}{sides}-{size} для xs и {property}{sides}-{breakpoint}-{size} для sm, md, lg и xl.

Примеры

.mt-0 { margin-top: 0 !important; }

.p-3 { padding: $spacer !important; }

11
vallismortis

Я добавляю этот код в свой проект Bootstrap3.3 с теми же точками останова столбцов сетки, основанными на ответе @guest. До того, как я использовал Bootstrap 4 padding и помощник по полям, он был хорошим выбором.

/*Margin and Padding helpers*/
/*xs*/
.p-xs { padding: .25em; }
.p-x-xs { padding: 0 .25em; }
.p-y-xs { padding: .25em 0 ; }
.p-t-xs { padding-top: .25em; }
.p-r-xs { padding-right: .25em; }
.p-b-xs { padding-bottom: .25em; }
.p-l-xs { padding-left: .25em; }
.m-xs { margin: .25em; }
.m-x-xs { margin: 0 .25em; }
.m-y-xs { margin: .25em 0 ; }
.m-r-xs { margin-right: .25em; }
.m-l-xs { margin-left: .25em; }
.m-t-xs { margin-top: .25em; }
.m-b-xs { margin-bottom: .25em; }
/*sm*/
@media (min-width:768px){
/*sm*/
.p-sm { padding: .5em; }
.p-x-sm { padding: 0 .5em; }
.p-y-sm { padding: .5em 0 ; }
.p-t-sm { padding-top: .5em; }
.p-r-sm { padding-right: .5em; }
.p-b-sm { padding-bottom: .5em; }
.p-l-sm { padding-left: .5em; }
.m-sm { margin: .5em; }
.m-x-sm { margin: 0 .5em; }
.m-y-sm { margin: .5em 0 ; }
.m-t-sm { margin-top: .5em; }
.m-r-sm { margin-right: .5em; }
.m-b-sm { margin-bottom: .5em; }
.m-l-sm { margin-left: .5em; }
}

/*md*/
@media (min-width: 992px){
.p-md { padding: 1em; }
.p-x-md { padding: 0 1em; }
.p-y-md { padding: 1em 0; }
.p-t-md { padding-top: 1em; }
.p-r-md { padding-right: 1em; }
.p-b-md { padding-bottom: 1em; }
.p-l-md { padding-left: 1em; }
.m-md { margin: 1em; }
.m-x-md { margin: 0 1em; }
.m-y-md { margin: 1em 0 ; }
.m-t-md { margin-top: 1em; }
.m-r-md { margin-right: 1em; }
.m-b-md { margin-bottom: 1em; }
.m-l-md { margin-left: 1em; }
}

/*lg*/
@media (min-width: 1200px){
.p-lg { padding: 1.5em; }
.p-x-lg { padding: 0 1.5em; }
.p-y-lg { padding: 1.5em 0; }
.p-t-lg { padding-top: 1.5em; }
.p-r-lg { padding-right: 1.5em; }
.p-b-lg { padding-bottom: 1.5em; }
.p-l-lg { padding-left: 1.5em; }
.m-lg { margin: 1.5em; }
.m-x-lg { margin: 0 1.5em; }
.m-y-lg { margin: 1.5em 0; }
.m-t-lg { margin-top: 1.5em; }
.m-r-lg { margin-right: 1.5em; }
.m-b-lg { margin-bottom: 1.5em; }
.m-l-lg { margin-left: 1.5em; }
}
/*xl*/
.p-xl { padding: 3em; }
.p-x-xl { padding: 0 3em; }
.p-y-xl { padding: 3em 0 ; }
.p-t-xl { padding-top: 3em; }
.p-r-xl { padding-right: 3em; }
.p-b-xl { padding-bottom: 3em; }
.p-l-xl { padding-left: 3em; }
.m-xl { margin: 3em; }
.m-x-xl { margin: 0 3em; }
.m-y-xl { margin: 3em 0; }
.m-t-xl { margin-top: 3em; }
.m-r-xl { margin-right: 3em; }
.m-b-xl { margin-bottom: 3em; }
.m-l-xl { margin-left: 3em; }``
4
LucasTelesx

Я думаю, что вы спрашиваете, как создать отзывчивый интервал между классами rows или col-xx-xx.

Вы определенно можете сделать это с классом col-xx-offset-xx:

<div class="col-xs-4">
</div>

<div class="col-xs-7 col-xs-offset-1">
</div>

Что касается добавления margin или padding непосредственно к элементам, есть несколько простых способов сделать это в зависимости от вашего элемента. Вы можете использовать btn-lg или label-lg или well-lg. Если вы когда-нибудь задумывались, как я могу дать эту небольшую прокладку. Попробуйте добавить основной class name + lg или sm или md в зависимости от ваших требований к размеру:

<button class="btn btn-success btn-lg btn-block">Big Button w/ Display: Block</button>
4
SuperVeetz

Это взято из документов, и это работает очень хорошо.Вот ссылка

  • m - для классов, которые устанавливают маржу
  • p - для классов, которые устанавливают отступы

Где стороны являются одним из:

  • t - для классов, которые устанавливают margin-top или padding-top
  • b - для классов, которые устанавливают margin-bottom или padding-bottom
  • l - для классов, которые устанавливают margin-left или padding-left
  • r - для классов, которые устанавливают margin-right или padding-right

если вы хотите оставить поле слева, используйте mt-x, где x обозначает [1,2,3,4,5]

то же самое для прокладки

пример быть похожим

<div class = "mt-5"></div>
<div class = "pt-5"></div>

Используйте только p-x или m-x для получения отступов и поля x со всех сторон.

2
Muhammad Mohsin

Для начальной загрузки 4 у нас есть новые классы, названные со следующими обозначениями

m - for classes that set margin
p - for classes that set padding

Укажите сверху, снизу, слева, справа, слева и справа, сверху и снизу, используя буквы ниже

t - for classes that set margin-top (mt) or padding-top (pt)
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom

Укажите размер, используя следующие цифры

0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer * .25
2 - (by default) for classes that set the margin or padding to $spacer * .5
3 - (by default) for classes that set the margin or padding to $spacer
4 - (by default) for classes that set the margin or padding to $spacer * 1.5
5 - (by default) for classes that set the margin or padding to $spacer * 3

Примеры

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

Использование

Поэтому, когда вам нужно оставить отступ, просто добавьте любой класс из pl-0 в pl-5 в зависимости от ваших потребностей.

Если вам нужно поле сверху, просто добавьте любой класс от mt-0 до mt-5 в зависимости от ваших потребностей

Bootstrap 4 CDN

1
Vignesh Subramanian

Я хотел бы привести пример, который я попробовал, понимая приведенную выше документацию, и он работает правильно. Если вы хотите применить 25% заполнение для левого и правого сторон экрана среднего размера, пожалуйста, используйте px-md-1 . работает по желанию и может аналогичным образом следовать для других размеров экрана. :) 

0
user2285161