Bootstrap 4添加更多尺寸间距

Question

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

目前我在sass代码中:

section {
    padding: 0 80px;
}

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

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

理想的是:

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

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

Answer 1

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

Answer 2

如果你使用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;
    }
}

Answer 3

可能这也会有所帮助。假设您在 SCSS 中使用 Bootstrap 4 及更高版本。然后你可以添加以下内容。默认 1 rem - 16px。

$spacer: 1rem;
$spacers: ( 0:0);
@for $i from 1 through 150 {
  $spacers: map-merge($spacers, (
  $i: ($i * $spacer)
  ));
}

 注意：有趣的是 $i 将循环最多 150 个并创建最多 150 个类。

示例：如果您mt-10输入任何 html 标签。<div class="mt-10">这将立即起作用。mt-10 表示 10 * 16 = 160px :)

Answer 4

这个问题困扰了我整整一个下午，直到我找到了详细的解释。问题是很久以前提出的，但无论如何都在这里：

如果您使用 SCSS，您有自己的自定义 scss 文件，并且您想添加您提到的选项，只需使其看起来像这样：

@import "../bootstrap/scss/functions";
@import "../bootstrap/scss/variables";

$spacers: (
    // The rest of numbers you need to use...
    6: ($spacer * 5)
);

@import "../bootstrap/scss/bootstrap";

该方法是Bootstrap 文档中解释的方法。我不得不说这对新手来说有点晦涩，但据我所知，它基本上包括导入您要修改的部分，添加您需要的值，最后导入整个内容，以便稍后创建带有添加内容的 CSS 文件.

当然，您可能需要更改引导程序文件的路径，并将它们放在本地驱动器上。不确定从在线存储库导入是否有效。另请注意，顺序很重要。必须在 variables.scss 之前导入 functions.scss 否则它会失败。

Answer 5

有一个解决办法。在元素内添加另一个包装器，并为其提供更多填充类。

如果您想要一个 p-6，那么您将提供父容器 p-5 和包装器 p-1。