Question

是否内置保证金底层使用？我试过像bottom5那样

<div class="col-lg-2 bottom5"></div>

但这不起作用。

Answer 1

Boostrap 4有一个间距功能，可以解决问题https://getbootstrap.com/docs/4.0/utilities/spacing/

但是，你坚持使用较旧的bootstrap版本，或者不能全部使用它，如果你需要一个完整的边距和填充类列表，这里就是

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

由WebAppLayers从Homer Responsive Admin Theme获取。我想作者不要介意分享。它可能会节省一些Web Developer 20分钟的时间。

Answer 2

没有像你描述的边距的引导类。原因是需要0到10或100s边距的类，以及需要多个单位，例如px，em，%等。

您可以轻松地创建自己的课程。使用sublime文本编辑器和多选择更容易。

话虽如此，您不希望将每个样式规则抽象为html。原始CSS对于元素的特定内容非常有用，例如边距。对每种样式使用bootstrap类都会导致难以阅读HTML。

此问题标记为Bootstrap 3，但是当您更新到Bootstrap 4时，有一个built in utility for this。

Answer 3

现在可以在bootstrap 4中使用

实施例 -

<div class="mb-5 p-5"> margin-bottom and padding with size 5 </div>

您可以使用 -

m for margin
p for padding

对于双方来说：

t - top
b - bottom
l - left
r - right
x - both left & right
y - both top & bottom
blank -all sides

尺寸为0,1,2,3,4,5

Answer 4

尝试添加名为的类 margin-bottom-5

使用以下格式命名类：{property}-{sides}-{size}

来自：here

Answer 5

更新：引导4个类

Bootstrap 4类添加边距和填充

Bootstrap 4具有广泛的响应边距和填充实用程序类。它们适用于所有断点：xs（＆lt; = 576px），sm（＆gt; = 576px），md（＆gt; = 768px），lg（＆gt; = 992px）或xl（＆gt; = 1200px））：

这些类的格式为：{property}{sides}-{size} 对于xs和{property}{sides}-{breakpoint}-{size}对于sm，md，lg和xl。

财产是以下之一：

m - 设置保证金

p - 设置填充

哪一方是以下之一：

t - 设置margin-top或padding-top

b - 设置margin-bottom或padding-bottom

l - 设置margin-left或padding-left

r - 设置margin-right或padding-right

x - 设置padding-left和padding-right或margin-left和margin-right（X-axis）

y - 设置padding-top和padding-bottom或margin-top和margin-bottom（Y-axis）

空白 - 在元素的所有4个边上设置边距或填充大小是以下之一：

0 - 将边距或填充设置为0

1 - 将边距或填充设置为.25rem（如果font-size为16px则为4px）

2 - 将边距或填充设置为.5rem（如果字体大小为16px则为8px）

3 - 将边距或填充设置为1rem（如果字体大小为16px，则为16px）

4 - 将边距或填充设置为1.5rem（如果字体大小为16px，则为24px）

5 - 将边距或填充设置为3rem（如果字体大小为16px则为48px）

auto - 将保证金设为自动

参考链接：https://getbootstrap.com/docs/4.0/utilities/spacing/

如何使用

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

Answer 6

如果要添加边距底部，则可以从mb-0添加到mb-5。参见：https://getbootstrap.com/docs/4.4/utilities/spacing/

Twitter Bootstrap：内置于css类的margin-bottom

6 个答案: