CSS bootstrap 是否有内置的填充和边距类？

Does bootstrap have builtin padding and margin classes?

提问by Ozgur Erdogan

Does Bootstrap have built-in padding and margin classes like pad-10, mar-left-10or I have to add my own custom classes? For example, similar to the ones hereat padding and margin tabs.

Bootstrap 是否有内置的填充和边距类，比如pad-10，mar-left-10或者我必须添加我自己的自定义类？例如，类似于这里的填充和边距选项卡。

回答by Guest

There are built in classes, namely:

有内置的类，即：

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

回答by vallismortis

Bootstrap 4 has a new notation for margin and padding classes. Refer to Bootstrap 4.0 Documentation - Spacing.

Bootstrap 4 对边距和填充类有一个新的表示法。请参阅Bootstrap 4.0 文档 - 间距。

From the documentation:

从文档：

Notation

Spacing utilities that apply to all breakpoints, from xsto xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

The classes are named using the format {property}{sides}-{size}for xsand {property}{sides}-{breakpoint}-{size}for sm, md, lg, and xl.

Examples

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

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

符号

适用于所有断点的间距实用程序，从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; }

回答by Mohsin Ashraf

This is taken from the docs and it works very well.Here is the link

这是从文档中获取的，并且效果很好。链接在这里

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

• m - 对于设置边距的类
• p - 对于设置填充的类

Where sides are one of:

其中边是以下之一：

• t- for classes that set margin-topor padding-top
• b- for classes that set margin-bottomor padding-bottom
• l- for classes that set margin-leftor padding-left
• r- for classes that set margin-rightor padding-right

• t- 对于设置margin-top或padding-top 的类
• b- 对于设置margin-bottom或padding-bottom 的类
• l- 对于设置margin-left或padding-left 的类
• r- 对于设置margin-right或padding-right 的类

if you want to give margin to the left use mt-xwhere x stands for [1,2,3,4,5]

如果你想给左边留余量，请使用mt-x其中 x 代表 [1,2,3,4,5]

same for padding

相同的填充

example be like

例子就像

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

Use only p-xor m-xfor getting padding and margin of x from all sides.

仅使用px或mx来从所有边获取 x 的填充和边距。

回答by LucasTelesx

I'm adding this code to my Bootstrap3.3 project with the same grid columns breakpoints, based with the @guest answer. Before I have used the Bootstrap 4 padding and margins helper it seens to be a good choice.

根据@guest 答案，我将此代码添加到我的 Bootstrap3.3 项目中，并使用相同的网格列断点。在我使用 Bootstrap 4 padding 和 margins helper 之前，它被认为是一个不错的选择。

/*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; }``

回答by Vignesh Subramanian

For bootstrap 4 we have new classes named with following notation

对于引导程序 4，我们有使用以下符号命名的新类

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

Specify Top, bottom,left, right, left & right, top & bottom using below letters

使用下面的字母指定顶部、底部、左侧、右侧、左侧和右侧、顶部和底部

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

Specify size using following numbers

使用以下数字指定尺寸

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

Actual Code from bootstrap 4 css file

来自 bootstrap 4 css 文件的实际代码

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

Usage

用法

So when you need some padding left just add any class from pl-0to pl-5based on your need

因此，当您需要一些填充时，只需根据需要添加任何类从pl-0到pl-5

If you need margin on top just add any class from mt-0to mt-5based on your need

如果您需要顶部边距，只需根据您的需要添加从mt-0到mt-5的任何类

<div class="col-sm-6 mt-5"> this div will have margin top added </div>
<div class="col-sm-6 pl-5"> this div will have padding left added </div>

Bootstrap 4 CDN

引导程序 4 CDN

回答by SuperVeetz

I think what you're asking about is how to create responsive spacing between rowsor col-xx-xxclasses.

我想你问的是如何创建响应之间的间距rows或col-xx-xx类。

You can definitely do this with the col-xx-offset-xxclass:

你绝对可以用这个col-xx-offset-xx类来做到这一点：

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

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

As for adding marginor paddingdirectly to elements, there are some simple ways to do this depending on your element. You can use btn-lgor label-lgor well-lg. If you're ever wondering, how can i give this alittle padding. Try adding the primary class name+ lgor smor mddepending on your size needs:

至于添加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>

回答by user2285161

I would like to give an example which I tried by understanding above documentation and works correctly. If you wish to apply 25% padding on left and right sides medium screen size then please use px-md-1. It works as desired and can similarly follow for other screen sizes. :)

我想举一个例子，我通过理解上述文档尝试过并正常工作。如果您希望在中等屏幕大小的左侧和右侧应用 25% 填充，请使用 px-md-1。它可以根据需要工作，并且可以类似地用于其他屏幕尺寸。:)

回答by sachin arora

These spacing notations are quite effective in custom changes. You can also use negative values there too. Official

这些间距符号在自定义更改中非常有效。您也可以在那里使用负值。官方的

Though we can use them whenever we want. Bootstrap Spacing

尽管我们可以随时使用它们。自举间距

回答by Surya R Praveen

Bootstrap has many facility of classes to easily style elements if HTML. It includes a various of padding and margin classes for modification of the appearance of the element.

Bootstrap 有许多类工具可以轻松地为 HTML 元素设置样式。它包括各种用于修改元素外观的填充和边距类。

.m-0 { margin:0!important; }
.m-1 { margin:.25rem!important; }
.m-2 { margin:.5rem!important; }
.m-3 { margin:1rem!important; }
.m-4 { margin:1.5rem!important; }
.m-5 { margin:3rem!important; }

.mt-0 { margin-top:0!important; }
.mr-0 { margin-right:0!important; }
.mb-0 { margin-bottom:0!important; }
.ml-0 { margin-left:0!important; }
.mx-0 { margin-left:0!immortant;margin-right:0!immortant; }
.my-0 { margin-top:0!immortant;margin-bottom:0!immortant; }

.mt-1 { margin-top:.25rem!important; }
.mr-1 { margin-right:.25rem!important; }
.mb-1 { margin-bottom:.25rem!important; }
.ml-1 { margin-left:.25rem!important; }
.mx-1 { margin-left:.25rem!immortant;margin-right:.25rem!immortant; }
.my-1 { margin-top:.25rem!immortant;margin-bottom:.25rem!immortant; }

.mt-2 { margin-top:.5rem!important; }
.mr-2 { margin-right:.5rem!important; }
.mb-2 { margin-bottom:.5rem!important; }
.ml-2 { margin-left:.5rem!important; }
.mx-2 { margin-right:.5rem!immortant;margin-left:.5rem!immortant; }
.my-2 { margin-top:.5rem!immortant;margin-bottom:.5rem!immortant; }

.mt-3 { margin-top:1rem!important; }
.mr-3 { margin-right:1rem!important; }
.mb-3 { margin-bottom:1rem!important; }
.ml-3 { margin-left:1rem!important; }
.mx-3 { margin-right:1rem!immortant;margin-left:1rem!immortant; }
.my-3 { margin-bottom:1rem!immortant;margin-top:1rem!immortant; }

.mt-4 { margin-top:1.5rem!important; }
.mr-4 { margin-right:1.5rem!important; }
.mb-4 { margin-bottom:1.5rem!important; }
.ml-4 { margin-left:1.5rem!important; }
.mx-4 { margin-right:1.5rem!immortant;margin-left:1.5rem!immortant; }
.my-4 { margin-top:1.5rem!immortant;margin-bottom:1.5rem!immortant; }

.mt-5 { margin-top:3rem!important; }
.mr-5 { margin-right:3rem!important; }
.mb-5 { margin-bottom:3rem!important; }
.ml-5 { margin-left:3rem!important; }
.mx-5 { margin-right:3rem!immortant;margin-left:3rem!immortant; }
.my-5 { margin-top:3rem!immortant;margin-bottom:3rem!immortant; }

.mt-auto { margin-top:auto!important; }
.mr-auto { margin-right:auto!important; }
.mb-auto { margin-bottom:auto!important; }
.ml-auto { margin-left:auto!important; }
.mx-auto { margin-right:auto!important;margin-left:auto!important; }
.my-auto { margin-bottom:auto!important;margin-top:auto!important; }

.p-0 { padding:0!important; }
.p-1 { padding:.25rem!important; }
.p-2 { padding:.5rem!important; }
.p-3 { padding:1rem!important; }
.p-4 { padding:1.5rem!important; }
.p-5 { padding:3rem!important; }

.pt-0 { padding-top:0!important; }
.pr-0 { padding-right:0!important; }
.pb-0 { padding-bottom:0!important; }
.pl-0 { padding-left:0!important; }                             
.px-0 { padding-left:0!important;padding-right:0!important; }
.py-0 { padding-top:0!important;padding-bottom:0!important; }

.pt-1 { padding-top:.25rem!important; }         
.pr-1 { padding-right:.25rem!important; }                       
.pb-1 { padding-bottom:.25rem!important; }      
.pl-1 { padding-left:.25rem!important; }                            
.px-1 { padding-left:.25rem!important;padding-right:.25rem!important; }
.py-1 { padding-top:.25rem!important;padding-bottom:.25rem!important; }

.pt-2 { padding-top:.5rem!important; }                                              
.pr-2 { padding-right:.5rem!important; }                                
.pb-2 { padding-bottom:.5rem!important; }               
.pl-2 { padding-left:.5rem!important; }                                             
.px-2 { padding-right:.5rem!important;padding-left:.5rem!important; }
.py-2 { padding-top:.5rem!important;padding-bottom:.5rem!important; }

.pt-3 { padding-top:1rem!important; }                               
.pr-3 { padding-right:1rem!important; }             
.pb-3 { padding-bottom:1rem!important; }                
.pl-3 { padding-left:1rem!important; }                              
.py-3 { padding-bottom:1rem!important;padding-top:1rem!important; }
.px-3 { padding-right:1rem!important;padding-left:1rem!important; }

.pt-4 { padding-top:1.5rem!important; }                             
.pr-4 { padding-right:1.5rem!important; }               
.pb-4 { padding-bottom:1.5rem!important; }              
.pl-4 { padding-left:1.5rem!important; }                                
.px-4 { padding-right:1.5rem!important;padding-left:1.5rem!important; }
.py-4 { padding-top:1.5rem!important;padding-bottom:1.5rem!important; }

.pt-5 { padding-top:3rem!important; }   
.pr-5 { padding-right:3rem!important; } 
.pb-5 { padding-bottom:3rem!important; }    
.pl-5 { padding-left:3rem!important; }  
.px-5 { padding-right:3rem!important;padding-left:3rem!important; }
.py-5 { padding-top:3rem!important;padding-bottom:3rem!important; }

https://jsfiddle.net/ssuryar/x47bca1u/

https://jsfiddle.net/ssuryar/x47bca1u/