Bootstrap 4增加更多尺寸间距

问题描述

我在一个Web项目的中间，其中各节之间的间距为80px.我想在引导间隔中再创建一个选项.

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.

目前我在sass代码中:

For the moment I have in the sass code:

section {
    padding: 0 80px;
}

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

Bootstrap spacers range from .25em to 3em (.p-5 = 40px)

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

I would like to create a .p-6 class containing 5em (80px)

理想是:

<section class="py-5 py-md-6">

我通过CDN链接了一个引导程序.我无法想象如何使用变量创建此变量，以某种方式将其集成到boostrap CSS中.你能给我些线索吗?

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?

推荐答案

如果您使用的是scss，则可以在编译引导程序之前直接向$ spacers变量添加另一个条目...类似

If you were using scss, you could simply add another entry to the $spacers variable before compiling bootstrap... so something like

$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

The above taken and modified from 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 ):

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

.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;
    }
}

这篇关于Bootstrap 4增加更多尺寸间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！