bootstrap 是不是内置了 padding 和 margin 类？

Posted 2023-03-06

【中文标题】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，那就太糟糕了。

【参考方案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 及以上应用，因此不受媒体约束 询问。但是，其余的断点确实包含一个断点 缩写。

这些类使用propertysides-size 格式命名为xs 和propertysides-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

- 用于设置

ma​​rgin-top

或

padding-top

的类

b

- 用于设置

ma​​rgin-bottom

或

padding-bottom

的类

l

- 用于设置

ma​​rgin-left

或

padding-left

的类

r

- 用于设置

ma​​rgin-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

【讨论】：

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

负值！