bootstrap 是否内置了 padding 和 margin 类？答案

【问题标题】：Does bootstrap have builtin padding and margin classes?bootstrap 是否内置了 padding 和 margin 类？
【发布时间】：2015-11-20 21:33:22
【问题描述】：

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

【问题讨论】：

不在 Bootstrap 3 中，但在 Bootstrap 4 中。对于 Bootstrap 3，您需要：github.com/diqidoq/qcss/blob/master/qcss.spacing.less Bootstrap 已为 Bootstrap 4 分叉/采用并扩展（因此没有新的学习曲线）
没有 sass/scss 解决方案，所以我把它放在一起用于 BS3：gist.github.com/devkinetic/b5770fbd4ccfa73788539fcdc40fccfb
我可以说 Bootstrap 3 没有填充和边距类。如果你的遗留系统仍然使用 bootstrap 3，那就太糟糕了。

标签： css twitter-bootstrap margin padding

【解决方案1】：

有内置类，即：

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

【讨论】：

这些是 Bootstrap 内置的类吗？它们似乎不适用于 v3.3
在此处查找 Bootstrap 3 的附加组件：github.com/diqidoq/qcss/blob/master/qcss.spacing.less - 在 Bootstrap 4 中，他们巧妙地采用了这种方法。
@nilsun 我尝试点击您提供的链接，但它已损坏
是的@YousefAltaf，该链接已损坏，但如果您想查看该示例，您仍然可以访问github.com/diqidoq/qcss :)
BS4 间距实用程序的 BS3 + SCSS 反向移植：gist.github.com/devkinetic/b5770fbd4ccfa73788539fcdc40fccfb

【解决方案2】：

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 !important;margin-right:0 !important; }
.my-0 { margin-top:0!important;margin-bottom:0!important; }

.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!important;margin-right:.25rem!important; }
.my-1 { margin-top:.25rem!important;margin-bottom:.25rem!important; }

.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!important;margin-left:.5rem!important; }
.my-2 { margin-top:.5rem!important;margin-bottom:.5rem!important; }

.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!important;margin-left:1rem!important; }
.my-3 { margin-bottom:1rem!important;margin-top:1rem!important; }

.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!important;margin-left:1.5rem!important; }
.my-4 { margin-top:1.5rem!important;margin-bottom:1.5rem!important; }

.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!important;margin-left:3rem!important; }
.my-5 { margin-top:3rem!important;margin-bottom:3rem!important; }

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

【讨论】：

【解决方案3】：

Bootstrap 4 为边距和填充类提供了新的表示法。参考Bootstrap 4.0 Documentation - Spacing。

来自文档：

符号

适用于从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; }

【讨论】：

他们巧妙地从 Drupal 开发人员 diqidoq github.com/diqidoq/qcss/blob/master/qcss.spacing.less 分叉/采用了 ;-)

【解决方案4】：

这是取自文档，效果很好。 Here is the link

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 的内边距和边距。

【讨论】：

【解决方案5】：

我将此代码添加到具有相同网格列断点的 Bootstrap3.3 项目中，基于 @guest 答案。在我使用 Bootstrap 4 填充和边距助手之前，它被认为是一个不错的选择。

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

【讨论】：

@DisplayName 很好，我将在我的新项目中使用它^^。
请参阅@Surya R Praveen 的回答，以更好地表示 Bootstrap 4+ 以及更轻松地在未来过渡到实际的 Bootstrap。

【解决方案6】：

对于 bootstrap 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

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

用法

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

如果您需要顶部边距，只需根据您的需要添加从 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

【讨论】：

【解决方案7】：

我认为您要问的是如何在 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>

【讨论】：

【解决方案8】：

Bootstrap 5 更改了 ml,mr,pl,pr 类，如果您从较低版本升级，这些类将不再有效。 l 和 r 现在已分别替换为 s(...令人困惑) 和 e(east?)。

来自引导网站：

属性是以下之一：

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

边是以下之一：

t - 用于设置 margin-top 或 padding-top 的类
b - 用于设置 margin-bottom 或 padding-bottom 的类
s - 对于在 LTR 中设置 margin-left 或 padding-left ，在 RTL 中设置 margin-right 或 padding-right 的类
e - 用于在 LTR 中设置 margin-right 或 padding-right ，在 RTL 中设置 margin-left 或 padding-left 的类
x - 用于设置 *-left 和 *-right 的类
y - 对于同时设置 *-top 和 *-bottom 的类空白 - 用于在元素的所有 4 个边上设置边距或填充的类其中 size 是以下之一：

0 - 用于通过将其设置为 0 来消除边距或填充的类 1 - （默认情况下）用于将边距或填充设置为 $spacer * .25 的类 2 - （默认情况下）用于将边距或填充设置为 $spacer * .5 的类 3 - （默认情况下）用于将边距或填充设置为 $spacer 的类 4 - （默认情况下）用于将边距或填充设置为 $spacer * 1.5 的类 5 - （默认情况下）用于将边距或填充设置为 $spacer * 3 的类 auto - 对于将边距设置为 auto 的类（您可以通过向 $spacers Sass 映射变量添加条目来添加更多大小。）

【讨论】：

正在寻找相同的解释。说得通，我已经说服自己使用 flex 来证明内容的合理性与 s(tart) 和 e(nd) 类似
@stubben 我用谷歌搜索了为什么新的左右类被重命名了，这可能是唯一的解释。当 L 和 R 完美地描述了被操纵的属性时，这是一件愚蠢的事情，即 margin-left 和 margin-right

【解决方案9】：

4 和 5 之前的引导版本不定义 ml、mr、pl 和 pr。

Bootstrap 版本 4 和 5 定义了 ml、mr、pl 和 pr 的类。

例如：

mr--1
ml--1
pr--1
pl--1

【讨论】：

这个答案中没有什么新东西不是已经给出的答案

【解决方案10】：

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

【讨论】：

【解决方案11】：

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

尽管我们可以随时使用它们。 Bootstrap Spacing

【讨论】：

您的答案如何添加到其他详细的答案中？如果它没有为问题添加任何内容，请不要回答。谢谢
负值！