间隔器中乘数的下一个值 bootstrap 4

Question

Bootstrap 带有 0-5 个垫片，乘数是 0.25 to 3。如果我想添加最多 15 个垫片，乘数的值是多少。

我可以看到当前数字是前一个数字的 2 倍的序列。

e.g. 3 is double than 1.5, 0.5 is double than .25.

这个假设是否正确？接下来的 6 到 15 ideal multiplier 会是什么样子？

https://getbootstrap.com/docs/4.5/utilities/spacing/

Answer 1

间隔值不是 sequence/series。它们按 1-5 级划分，以在 breakpoints.
中提供一致的响应能力引入这些值后，以下断点 xs, sm, md, lg 可用：

// Media queries breakpoints
//
// Define the minimum and maximum dimensions at which your layout will change, adapting to different screen sizes.

// Grid system
//
// Define your custom responsive grid.
$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 34em,
  // Medium screen / tablet
  md: 48em,
  // Large screen / desktop
  lg: 62em,
  // Extra large screen / wide desktop
  xl: 75em
) !default;

如果您查看 the code when first time 这些值的引入，类的定义如下：

 .m-t-0  { margin-top:  0; }
 .m-t    { margin-top:  $spacer-y; }
 .m-t-md { margin-top: ($spacer-y * 1.5); }
 .m-t-lg { margin-top: ($spacer-y * 3); }

他们将值 .25 和 .5 添加到规模 later on。

我认为他们想提供一种根据视口大小缩放元素大小的方法，如下所示：

<body class="col-7 mx-auto" style="border: 2px dashed gray;">
  <div class="fs-6 
              p-0 p-sm-3 p-md-4 p-lg-5 
              m-0 m-sm-3 m-md-4 m-lg-5 
              border border-4 border-info">
    <div class="bg-warning">Lorem ipsum dolor sit amet consectetur.</div>
  </div>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
</body>

运行在上面的代码片段中，进入全页模式，然后打开 Chrome 开发人员工具，然后单击“切换设备工具栏”和 select 尺寸：响应选项。调整宽度。您会注意到不同视口大小的元素缩放，即当它到达断点时。

添加更多间距值的意图可能是：

更精细的间距选项 - 如果您想要更多控制，那么您可以使用 4px 的倍数的值。例如，考虑到 1rem=16px，值可以是 0, 0.25, 0.5, 1, 1.25, 1.5, 1.75, 2,...,4.
vertical rhythm- 为此，您必须查看页面上的元素并确定所有这些元素所需的填充和边距，并将这些值放入 $spacers 映射中。

以下 SO 问题对间距进行了很好的讨论：

What are the rules of thumb for margins in web design?
General rule to calculate padding

间隔器中乘数的下一个值 bootstrap 4

Next values for multiplier in spacers bootstrap 4

html

sass

bootstrap-4

scss-mixins