Bootstrap4添加更多尺寸间距

我正处于一个Web项目的中间,部分之间的空间为80px.我想在bootstrap spacers中再创建一个选项.

目前我在sass代码中:

section {
    padding: 0 80px;
}

Bootstrap垫片的范围从.25em到3em(.p-5 = 40px)

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

理想的是:

我通过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;
    }
}