javascript - 如何在 html 中添加更多半列，例如 0.5、1.5、2..5

Question

我创建了一个登录表单，我输入了 col 值

<div class="col l3 offset-l4">

我想在 col 中增加 0.5 个尺寸，像这样

<div class="col l3 offset-l4.5">

我该怎么做？

Answer 1

假设您使用 Materialise Grid 系统，这是不可能的。它仅支持整数值。

但是您可以自定义实现。网格的基本思想是将一行分成 12 列。因此，网格值为 4.5 表示 12 列中的 4.5 (4.5/12)，结果为 0.375 或 37.5%。如果您想要偏移 4.5 列，则需要为您的元素添加 37.5% 的左边距。

因此您需要添加以下 CSS(请注意您不能在类名中使用点):

.offset-l4-5 {
  margin-left: 37.5%;
}

但我想摆脱网格系统并为表单编写自己的 CSS 会更容易。