Bootstrap 4 添加更多尺寸间距

Question

我正在进行一个网络项目，其中部分之间的空间为 80 像素。 我想在引导间隔中再创建一个选项。

目前我在 sass 代码中：

section {
    padding: 0 80px;
}

引导垫片的范围从 0.25em 到 3em (.p-5 = 40px)

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

理想的情况是：

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

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

Answer 1

如果您使用的是 scss，则可以在编译引导程序之前简单地向 $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 2

如果您使用的是 scss，这就是我对间隔的基本扩展（引导程序 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 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

有一个解决方法。在你的元素中添加另一个 wrapper，并给它更多的填充类。

如果你想要一个 p-6，那么你可以给父容器 p-5 和包装器 p-1。

Answer 5

我喜欢这种保留小数分隔符的解决方案，并为每个类名设置一个有意义的数字（数字 = 乘数）：

$spacer: 1rem;
$spacers: (
  0: 0,
  '025': (
    $spacer * 0.25,
  ),
  '05': (
    $spacer * 0.5,
  ),
);
@for $i from 1 through 5 {
  $spacers: map-merge(
    $spacers,
    (
      $i: (
        $i * $spacer,
      ),
    )
  );
}

Answer 6

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

如果你使用 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 Documentation中解释的方法。我不得不说这对新手来说有点晦涩，但据我了解，它基本上包括导入您要修改的部分，添加您需要的值，最后导入整个内容，以便稍后使用您的添加创建您的 CSS 文件.

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