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

Question

我在一个网络元素的中间，部分之间的空间有 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 中。你能给我一些线索吗？

Answer 1

如果您使用的是 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;
    }
}