Twitter Bootstrap：css 类中内置的边距底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34864824/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap: margin-bottom built in css class
提问by user1765862
Is there built in margin bottom class to use?
I tried with bottom5like
是否有内置的保证金底层类可以使用？我试过bottom5喜欢
<div class="col-lg-2 bottom5"></div>
but this doesn't work.
但这不起作用。
采纳答案by Goose
There is no bootstrap class for margins like you describe. The reasons would be the need for classes for margins 0 to 10s or 100s, as well as the need for multiple units, such as px, em, %, etc.
没有像您描述的边距的引导程序类。其原因将是类边距0至几十或几百的需要，以及需要多个单元，例如px，em，%等。
You can make your own classes fairly easy. Even easier with sublime text-editor and multi-select.
您可以使自己的课程相当容易。使用 sublime 文本编辑器和多选更容易。
That being said, you don't want to abstract every style rule into the html. Original CSS is useful for something particular to your element, such as margins. Using bootstrap classes for every style would lead to difficult to read HTML.
话虽如此，您不想将每个样式规则都抽象到 html 中。原始 CSS 对元素的特定内容很有用，例如边距。为每种样式使用引导类会导致难以阅读 HTML。
This Question is tagged Bootstrap 3, but when you update to Bootstrap 4, there is a built in utility for this.
这个问题被标记为 Bootstrap 3，但是当你更新到 Bootstrap 4 时，有一个内置的实用程序。
回答by Piotr Salaciak
Boostrap 4 has a spacing feature that solves that problem https://getbootstrap.com/docs/4.0/utilities/spacing/
Boostrap 4 具有解决该问题的间距功能https://getbootstrap.com/docs/4.0/utilities/spacing/
But, in you are sticked to older bootstrap version or can't use it a all and in case you need a complete list of margin and padding classes, here it is
但是，如果您坚持使用较旧的引导程序版本或不能全部使用它，并且如果您需要完整的边距和填充类列表，这里是
/* MARGINS & PADDINGS */
.p-xxs {
padding: 5px !important;
}
.p-xs {
padding: 10px !important;
}
.p-sm {
padding: 15px !important;
}
.p-m {
padding: 20px !important;
}
.p-md {
padding: 25px !important;
}
.p-lg {
padding: 30px !important;
}
.p-xl {
padding: 40px !important;
}
.m-xxs {
margin: 2px 4px;
}
.m-xs {
margin: 5px;
}
.m-sm {
margin: 10px;
}
.m {
margin: 15px;
}
.m-md {
margin: 20px;
}
.m-lg {
margin: 30px;
}
.m-xl {
margin: 50px;
}
.m-n {
margin: 0 !important;
}
.m-l-none {
margin-left: 0;
}
.m-l-xs {
margin-left: 5px;
}
.m-l-sm {
margin-left: 10px;
}
.m-l {
margin-left: 15px;
}
.m-l-md {
margin-left: 20px;
}
.m-l-lg {
margin-left: 30px;
}
.m-l-xl {
margin-left: 40px;
}
.m-l-n-xxs {
margin-left: -1px;
}
.m-l-n-xs {
margin-left: -5px;
}
.m-l-n-sm {
margin-left: -10px;
}
.m-l-n {
margin-left: -15px;
}
.m-l-n-md {
margin-left: -20px;
}
.m-l-n-lg {
margin-left: -30px;
}
.m-l-n-xl {
margin-left: -40px;
}
.m-t-none {
margin-top: 0;
}
.m-t-xxs {
margin-top: 1px;
}
.m-t-xs {
margin-top: 5px;
}
.m-t-sm {
margin-top: 10px;
}
.m-t {
margin-top: 15px;
}
.m-t-md {
margin-top: 20px;
}
.m-t-lg {
margin-top: 30px;
}
.m-t-xl {
margin-top: 40px;
}
.m-t-xxl {
margin-top: 50px;
}
.m-t-xxxl {
margin-top: 60px;
}
.m-t-n-xxs {
margin-top: -1px;
}
.m-t-n-xs {
margin-top: -5px;
}
.m-t-n-sm {
margin-top: -10px;
}
.m-t-n {
margin-top: -15px;
}
.m-t-n-md {
margin-top: -20px;
}
.m-t-n-lg {
margin-top: -30px;
}
.m-t-n-xl {
margin-top: -40px;
}
.m-r-none {
margin-right: 0;
}
.m-r-xxs {
margin-right: 1px;
}
.m-r-xs {
margin-right: 5px;
}
.m-r-sm {
margin-right: 10px;
}
.m-r {
margin-right: 15px;
}
.m-r-md {
margin-right: 20px;
}
.m-r-lg {
margin-right: 30px;
}
.m-r-xl {
margin-right: 40px;
}
.m-r-n-xxs {
margin-right: -1px;
}
.m-r-n-xs {
margin-right: -5px;
}
.m-r-n-sm {
margin-right: -10px;
}
.m-r-n {
margin-right: -15px;
}
.m-r-n-md {
margin-right: -20px;
}
.m-r-n-lg {
margin-right: -30px;
}
.m-r-n-xl {
margin-right: -40px;
}
.m-b-none {
margin-bottom: 0;
}
.m-b-xxs {
margin-bottom: 1px;
}
.m-b-xs {
margin-bottom: 5px;
}
.m-b-sm {
margin-bottom: 10px;
}
.m-b {
margin-bottom: 15px;
}
.m-b-md {
margin-bottom: 20px;
}
.m-b-lg {
margin-bottom: 30px;
}
.m-b-xl {
margin-bottom: 40px;
}
.m-b-n-xxs {
margin-bottom: -1px;
}
.m-b-n-xs {
margin-bottom: -5px;
}
.m-b-n-sm {
margin-bottom: -10px;
}
.m-b-n {
margin-bottom: -15px;
}
.m-b-n-md {
margin-bottom: -20px;
}
.m-b-n-lg {
margin-bottom: -30px;
}
.m-b-n-xl {
margin-bottom: -40px;
}
.space-15 {
margin: 15px 0;
}
.space-20 {
margin: 20px 0;
}
.space-25 {
margin: 25px 0;
}
.space-30 {
margin: 30px 0;
}
It's taken from Homer Responsive Admin Themeby WebAppLayers. I guess author don't mind sharing that. It probably will save 20min of time of some Web Developer out there.
它取自WebAppLayers 的Homer Responsive Admin Theme。我想作者不介意分享那个。它可能会为一些 Web 开发人员节省 20 分钟的时间。
回答by Shivam Chhetri
Now available in bootstrap 4
现在可在引导程序 4 中使用
Example-
例子-
<div class="mb-5 p-5">
margin-bottom and padding with size 5
</div>
<div class="mb-5 p-5">
margin-bottom and padding with size 5
</div>
You can use-
您可以使用-
m for margin
p for padding
And for sides:
对于双方：
t - top
b - bottom
l - left
r - right
x - both left & right
y - both top & bottom
blank -all sides
For size- 0,1,2,3,4,5
对于大小 - 0,1,2,3,4,5
回答by CriPstian
回答by Ashish Singh Rawat
UPDATE : Bootstrap 4 Classes
更新：Bootstrap 4 类
Bootstrap 4 classes to add margin and padding
Bootstrap 4 类来添加边距和填充
Bootstrap 4 has a wide range of responsive margin and padding utility classes. They work for all breakpoints: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px) or xl (>=1200px)):
Bootstrap 4 具有广泛的响应边距和填充实用程序类。它们适用于所有断点：xs (<=576px)、sm (>=576px)、md (>=768px)、lg (>=992px) 或 xl (>=1200px)）：
The classes are used in the format: {property}{sides}-{size}for xs and {property}{sides}-{breakpoint}-{size}for sm, md, lg, and xl.
这些类的使用格式如下：{property}{sides}-{size}用于 xs 和{property}{sides}-{breakpoint}-{size}用于 sm、md、lg 和 xl。
Where property is one of:
财产是以下之一：
m- sets margin
m- 设置保证金
p- sets padding
p- 设置填充
Where sides is one of:
其中边是以下之一：
t- sets margin-top or padding-top
t- 设置 margin-top 或 padding-top
b- sets margin-bottom or padding-bottom
b- 设置 margin-bottom 或 padding-bottom
l- sets margin-left or padding-left
l- 设置 margin-left 或 padding-left
r- sets margin-right or padding-right
r- 设置 margin-right 或 padding-right
x- sets both padding-left and padding-right or margin-left and margin-right(X-axis)
x- 设置 padding-left 和 padding-right 或 margin-left 和 margin-right（X 轴）
y- sets both padding-top and padding-bottom or margin-top and margin-bottom(Y-axis)
y- 设置 padding-top 和 padding-bottom 或 margin-top 和 margin-bottom（Y 轴）
blank - sets a margin or padding on all 4 sides of the element Where size is one of:
空白 - 在元素的所有 4 个边上设置边距或内边距，其中 size 是以下之一：
0- sets margin or padding to 0
0- 将边距或填充设置为 0
1- sets margin or padding to .25rem (4px if font-size is 16px)
1- 将边距或填充设置为 .25rem（如果字体大小为 16px，则为 4px）
2- sets margin or padding to .5rem (8px if font-size is 16px)
2- 将边距或填充设置为 .5rem（如果字体大小为 16px，则为 8px）
3- sets margin or padding to 1rem (16px if font-size is 16px)
3- 将边距或填充设置为 1rem（如果字体大小为 16px，则为 16px）
4- sets margin or padding to 1.5rem (24px if font-size is 16px)
4- 将边距或填充设置为 1.5rem（如果字体大小为 16 像素，则为 24 像素）
5- sets margin or padding to 3rem (48px if font-size is 16px)
5- 将边距或填充设置为 3rem（如果字体大小为 16 像素，则为 48 像素）
auto- sets margin to auto
auto- 将边距设置为自动
Reference Links: https://getbootstrap.com/docs/4.0/utilities/spacing/
参考链接：https: //getbootstrap.com/docs/4.0/utilities/spacing/
HOW TO USE
如何使用
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="pt-4 bg-warning">I only have a top padding (1.5rem = 24px)</div>
<div class="p-5 bg-success">I have a padding on all sides (3rem = 48px)</div>
<div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem = 48px) and a bottom padding (3rem = 48px)</div>