间隔引导程序 4 中乘数的下一个值
Posted
技术标签:
【中文标题】间隔引导程序 4 中乘数的下一个值【英文标题】：Next values for multiplier in spacers bootstrap 4 【发布时间】：2022-01-14 05:30:47 【问题描述】：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/
【问题讨论】：
此链接包含类似的问题和答案***.com/questions/46119384/… 【参考方案1】：间隔值不是序列/系列。它们按 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>添加更多间距值的意图可能是：
更精细的间距选项 - 如果您想要更多的控制，那么您可以使用 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
【讨论】：
以上是关于间隔引导程序 4 中乘数的下一个值的主要内容，如果未能解决你的问题，请参考以下文章