twitter-bootstrap Bootstrap 4 添加更多尺寸间距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46119384/
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
Bootstrap 4 add more sizes spacing
提问by nicogaldo
I'm in the middle of a web project, where spaces between sections have 80px. I would like to create one more option in the bootstrap spacers.
我在一个 web 项目的中间，其中部分之间的空间有 80px。我想在 bootstrap 垫片中再创建一个选项。
For the moment I have in the sass code:
目前我在 sass 代码中：
section {
padding: 0 80px;
}
Bootstrap spacers range from .25em to 3em (.p-5 = 40px)
Bootstrap 间隔范围从 .25em 到 3em (.p-5 = 40px)
I would like to create a .p-6class containing 5em (80px)
我想创建一个.p-6包含 5em (80px) 的类
The ideal would be:
理想的情况是：
<section class="py-5 py-md-6">
A bootstrap I have linked via CDN. I can not imagine how to create this with variables, somehow integrating it into the boostrap css. Could you give me any clues?
我通过 CDN 链接的引导程序。我无法想象如何用变量创建它，以某种方式将它集成到 boostrap css 中。你能给我一些线索吗？
回答by kball
If you were using scss, you could simply add another entry to the $spacers variable before compiling bootstrap... so something like
如果您使用的是 scss，则可以在编译引导程序之前简单地向 $spacers 变量添加另一个条目......
$spacers: (
0: 0,
1: ($spacer * .25),
2: ($spacer * .5),
3: $spacer,
4: ($spacer * 1.5),
5: ($spacer * 3),
6: ($spacer * 5)
)
The above taken and modified from https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L100
以上摘自https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L100
Since it sounds like you're using CSS only, you could define your own following the pattern they do, so in your own CSS add a set of classes (see below, taken and modified from https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css#L6937):
由于听起来您只使用 CSS，您可以按照他们所做的模式定义自己的样式，因此在您自己的 CSS 中添加一组类（见下文，从https://github.com/twbs/获取和修改）bootstrap/blob/v4-dev/dist/css/bootstrap.css#L6937）：
.pt-6,
.py-6 {
padding-top: 5rem !important;
}
.pr-6,
.px-6 {
padding-right: 5rem !important;
}
.pb-6,
.py-6 {
padding-bottom: 5rem !important;
}
.pl-6,
.px-6 {
padding-left: 5rem !important;
}
and if you in particular want the medium breakpoint ones, you could do
如果你特别想要中等断点，你可以这样做
@media (min-width: 768px) {
.pt-md-6,
.py-md-6 {
padding-top: 5rem !important;
}
.pr-md-6,
.px-md-6 {
padding-right: 5rem !important;
}
.pb-md-6,
.py-md-6 {
padding-bottom: 5rem !important;
}
.pl-md-6,
.px-md-6 {
padding-left: 5rem !important;
}
}
回答by Stavros
If you were using scss, thats my very basic extension of spacers (bootstrap 4 - default font-size:16px)
如果您使用的是 scss，这就是我对间隔符的非常基本的扩展（bootstrap 4 - 默认字体大小：16px）
$spacer: 1rem !default;
$spacers: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$spacers: map-merge(
(
0: 0,
1: ($spacer * .25), //4px
2: ($spacer * .5), //8px
3: $spacer, //16px
4: ($spacer * 1.5), //24px
5: ($spacer * 3), //48px
6: ($spacer * 4), //64px
7: ($spacer * 5), //80px
8: ($spacer * 6.25), //100px
9: ($spacer * 7.5), //120px
10: ($spacer * 9.375) //150px
),
$spacers
回答by Ragavan Rajan
May be this will also help. Assuming if you are using Bootstrap 4 and above with SCSS. Then you can add the following. Default 1 rem - 16px.
可能这也会有所帮助。假设您在 SCSS 中使用 Bootstrap 4 及更高版本。然后你可以添加以下内容。默认 1 rem - 16px。
$spacer: 1rem;
$spacers: ( 0:0);
@for $i from 1 through 150 {
$spacers: map-merge($spacers, (
$i: ($i * $spacer)
));
}
?Note:Interesting thing is the $i will loop through up to 150 and create classes up to 150.
? 注意：有趣的是 $i 将循环最多 150 个并创建最多 150 个类。
Example:If you put mt-10in your any of your html tag. <div class="mt-10">which will instantly work. mt-10 indicates 10 * 16 = 160px :)
示例：如果您mt-10输入任何 html 标签。<div class="mt-10">这将立即起作用。mt-10 表示 10 * 16 = 160px :)
回答by morched23mj
There is a work around. Add another wrapperinside your element, and give it more padding classes.
有一个解决办法。在元素中添加另一个包装器，并为其提供更多填充类。
If you want to have a p-6, then you would give the parent container, p-5, and the wrapper p-1.
如果你想要一个 p-6，那么你可以给父容器 p-5 和包装器 p-1。
回答by PerrierCitror
I like this solution to keep the fractional spacers AND to have a number that makes sense for each class name (number = multiplier) :?
我喜欢这个解决方案来保留小数间隔符并且有一个对每个类名有意义的数字（数字=乘数）：？
$spacer: 1rem;
$spacers: (
0: 0,
'025': (
$spacer * 0.25,
),
'05': (
$spacer * 0.5,
),
);
@for $i from 1 through 5 {
$spacers: map-merge(
$spacers,
(
$i: (
$i * $spacer,
),
)
);
}
