Bootstrap 4 添加更多尺寸间距

Posted 2023-03-06

【中文标题】Bootstrap 4 添加更多尺寸间距

【英文标题】：Bootstrap 4 add more sizes spacing

【发布时间】：2018-02-17 13:14:26

【问题描述】：

我正在进行一个网络项目，其中部分之间的空间为 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 中。你能给我一些线索吗？

【问题讨论】：

混合引导边距和填充我猜会得到 80px (p-5 m-5)。这会与其他样式的应用（bg，边框，...）兼容吗？

我无法像他们所说的那样应用更改，经过大量头脑风暴后，我看到在我进行更改的文件中，有一个来自引导实用程序的导入。我将此导入移至更改 sn-p 后，它运行良好。我用 Regavan 的

【参考方案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;
    

【讨论】：

我正在使用 React-Bootstrap，并将最后一个代码 sn-p 添加到组件 CSS 对我有用。谢谢kball。

【参考方案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
     );

【讨论】：

这段代码只是来自 Bootstrap 的 _variables.scss 的复制粘贴。完全替换$spacers 条目的官方方法是什么？就像当您需要添加一个 .125 乘数作为第一项并转移所有其他项时一样。

嗨，Alexander，这段代码是通过官方方式回答“我想在引导间隔中再创建一个选项”这个问题的一个范围。基本引导上升到 5。同样的逻辑也适用于您的问题。更改所有值并从 .125 开始 1，从 0.25 开始 2 等

好吧 :) 我的意思是，当使用这个 sn-p 时，我们可能不想复制那些 !defaults。 AFAIK，我们应该在将 BS 内容复制粘贴到我们的 SCSS 时删除它们。

您不能简单地将 Bootstrap 变量复制/粘贴到您自己的代码中。这是覆盖 Bootstrap 默认变量值的官方方法：getbootstrap.com/docs/4.4/getting-started/theming/…。在这种情况下，您可以将 $spacers 重新定义为您喜欢的任何间隔尺寸组合。

【参考方案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 :)

【讨论】：

感谢循环。我不想计算我可能需要多少垫片:)

这实际上就是我想要的！谢谢。

喜欢这个答案，虽然我更喜欢从 0.5rem 开始我的 $spacer

【参考方案4】：

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

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

【讨论】：

是的，类似于