logo标签列表

Bootstrap有内置的填充和边距类吗？

csstwitter-bootstrapmarginpadding
86

Bootstrap有像pad-10, mar-left-10这样的内置填充和边距类吗，还是我需要添加自定义类？例如，类似于这里的填充和边距选项卡。

(Note: translated text retains HTML tags and format)
13
不在Bootstrap 3中，但在Bootstrap 4中存在。对于Bootstrap 3，您需要使用：https://github.com/diqidoq/qcss/blob/master/qcss.spacing.less，这是Bootstrap在Bootstrap 4中分叉/采用并进行了扩展（因此无需学习新的曲线）。 - nilsun
2
没有Sass/SCSS的解决方案，所以我为BS3准备了这个：https://gist.github.com/devkinetic/b5770fbd4ccfa73788539fcdc40fccfb - Ryan Hartman
2
我可以说Bootstrap 3没有填充和边距类。如果你的遗留系统仍在使用Bootstrap 3，那就太糟糕了。 - Dendi Handian
Bootstrap 4和5采用了JASS（以前是QCSS）的方法，使用实用类来实现额外的边距和填充等功能。但是，当它影响到节奏时，仍然很难进行全面的概述。因此，我的建议仍然是JASS（以前是QCSS）。https://github.com/diqidoq/jass - undefined
11个回答
73

有内置的类，分别是：

.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; }
54
这些是 Bootstrap 内置的类吗？它们似乎不适用于 v3.3 版本。 - gdvalderrama
1
@nilsun，我尝试跟随您提供的链接，但它已经失效了。 - Yousef Altaf
2
是的@YousefAltaf，那个链接已经失效了，但是如果你想查看那个例子，你仍然可以访问https://github.com/diqidoq/qcss :) - Ruth
4
我也在使用 Bootstrap 3.3.7，但这些类没有起作用。 - dapidmini
1
@YousefAltaf 现在是 JASS（前身为 QCSS），它是一个完整的基于组件的实用优先的 CSS 框架，具有许多像这里请求的工具：https://github.com/diqidoq/jass - undefined
显示剩余2条评论
53

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/

1
你真棒。把这个放进了我们非常古老的管理员 scss 文件里。 - undefined
27

这是从文档中提取的，并且它非常有效。 这是链接

  • m - 用于设置外边距的类
  • p - 用于设置内边距的类

其中，sides 可以是以下之一：

  • t - 用于设置上边距或上内边距的类
  • b - 用于设置下边距或下内边距的类
  • l - 用于设置左边距或左内边距的类
  • r - 用于设置右边距或右内边距的类

如果您想给左边添加边距，请使用ml-x，其中x为[1,2,3,4,5]

内边距同理

示例：

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

使用p-x或m-x来获取x的所有边缘的填充和外边距。

1
这里有一个错误：margin to the left use mt-x 应该是 ml-x。 - Timo
26

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

1
他们巧妙地从Drupal开发者diqidoq的https://github.com/diqidoq/qcss/blob/master/qcss.spacing.less中进行了分叉/采用。;-) - nilsun
15

我正在将这段代码添加到我的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; }``
1
请参考@Surya R Praveen的答案，以获得更好的Bootstrap 4+表示和更容易的未来转换到实际Bootstrap。 - jbobbins
10
Bootstrap 5已更改ml，mr，pl，pr类，如果您从较低版本升级，则不再起作用。 l和r现在分别替换为s（...令人困惑）和e（东方？）。
来自Bootstrap网站的内容：
其中属性之一是：
- m - 设置边距的类 - p - 设置填充的类
其中sides之一是：
- 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个边设置margin或padding的类
其中size之一是：
- 0 - 将margin或padding设置为0的类 - 1 - （默认情况下）将margin或padding设置为$spacer * .25的类 - 2 - （默认情况下）将margin或padding设置为$spacer * .5的类 - 3 - （默认情况下）将margin或padding设置为$spacer的类 - 4 - （默认情况下）将margin或padding设置为$spacer * 1.5的类 - 5 - （默认情况下）将margin或padding设置为$spacer * 3的类 - auto - 将margin设置为自动的类 （您可以通过向$spacers Sass映射变量添加条目来添加更多大小。）
1
一直在寻找相同的解释。为了让它有意义，我已经说服自己它是 s(开始) 和 e(结束) 相似，使用 flex 来证明内容。 - stubben
@stubben 我谷歌了一下为什么新的左右类被重命名，这可能是唯一的解释。当 L 和 R 完美地描述了被操作的属性，即 margin-left 和 margin-right 时，这样做是多么愚蠢的事情。 - DAustin
好消息 - bootstrap5，即5.2是当前版本。你能格式化你的回答吗？顺便说一下，s表示开始，e表示结束，这曾经是(l)eft和(r)ight。 - Timo
10

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

6

我认为您询问的是如何在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。如果您曾经想知道，如何给这个加一点填充。尝试添加主要类名+lg或sm或md，具体取决于您的大小需求：

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

Bootstrap 4和5之前的版本没有定义ml，mr，pl和pr这些类。

Bootstrap 4和5定义了ml，mr，pl和pr这些类。

例如：

mr--1
ml--1
pr--1
pl--1
1
这个答案中没有任何新的内容，已经有其他答案提供了相同的信息。 - Vega
这是错误的，bootstrap 5 已经改变，请查看原始文档。 - Timo
0

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

虽然我们可以随时使用它们。Bootstrap间距

你的回答如何补充其他详细的答案？如果不添加任何问题，请不要回答。谢谢。 - user12291970
负值！ - sachin arora
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接