gpt4 book ai didi

css - Bootstrap 4 添加更多尺寸间距

转载 作者:行者123 更新时间:2023-12-04 20:04:10 24 4
gpt4 key购买 nike

我在一个网络元素的中间,部分之间的空间有 80 像素。
我想在 Bootstrap 垫片中再创建一个选项。

目前我在 sass 代码中:

section {
padding: 0 80px;
}

自举间隔的范围从 .25em 到 3em (.p-5 = 40px)

我想创建一个 .p-6包含 5em (80px) 的类

理想的情况是:
<section class="py-5 py-md-6">

我通过 CDN 链接的 Bootstrap 。我无法想象如何用变量创建它,以某种方式将它集成到 boostrap css 中。你能给我一些线索吗?

最佳答案

如果您使用的是 scss,您可以在编译 Bootstrap 之前简单地向 $spacers 变量添加另一个条目......所以像

$spacers: (
0: 0,
1: ($spacer * .25),
2: ($spacer * .5),
3: $spacer,
4: ($spacer * 1.5),
5: ($spacer * 3),
6: ($spacer * 5)
)

以上内容取自 https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L100

因为听起来你只使用 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;
}

如果你特别想要中等断点,你可以这样做
@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;
}
}

关于css - Bootstrap 4 添加更多尺寸间距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46119384/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com