如何在HTML中添加半值列？含登录表单offset-l4.5调整需求

嘿，我来帮你搞定这两个Materialize栅格布局的问题——毕竟做精细布局时，半值列/偏移的需求真的太常见了！

问题1：如何添加0.5、1.5这类宽度的半值列？ #

Materialize默认的12栅格系统只提供了整数步长的列类（比如l1、l2），没有原生支持半值列。不过咱们可以通过自定义CSS轻松实现：

首先，根据Materialize的栅格计算逻辑，每整列的宽度是 100% / 12 ≈ 8.333%，半列就是这个值的一半（≈4.166%）。基于这个原理，我们可以为不同屏幕尺寸定义半值列的类：

/* 大屏幕（≥992px）的半值列样式 */
@media only screen and (min-width: 992px) {
  .col.l05 { width: 4.1666666667%; }   /* 0.5列宽度 */
  .col.l15 { width: 12.5%; }           /* 1.5列宽度 */
  .col.l25 { width: 20.8333333333%; }  /* 2.5列宽度 */
  .col.l35 { width: 29.1666666667%; }  /* 3.5列宽度 */
  /* 按需扩展更多半值列，比如l45、l55...直到l115 */
}

/* 中等屏幕（600px-991px）的半值列样式 */
@media only screen and (min-width: 600px) and (max-width: 991px) {
  .col.m05 { width: 4.1666666667%; }
  .col.m15 { width: 12.5%; }
  /* 按需添加 */
}

/* 小屏幕（≤599px）的半值列样式 */
@media only screen and (max-width: 599px) {
  .col.s05 { width: 4.1666666667%; }
  .col.s15 { width: 12.5%; }
  /* 按需添加 */
}

使用的时候直接把类加到元素上就行，比如要一个1.5宽度的大屏幕列：

<div class="col l15">我是1.5列宽度的内容</div>

问题2：如何实现4.5列的偏移量？ #

和半值列一样，Materialize也没有原生的半值偏移类，咱们同样用自定义CSS解决。偏移的核心是设置margin-left，计算方式和列宽度一致：4.5列的偏移量是 (4.5 / 12) * 100% = 37.5%。

对应的CSS代码：

/* 大屏幕的半值偏移样式 */
@media only screen and (min-width: 992px) {
  .offset-l45 { margin-left: 37.5%; }  /* 偏移4.5列 */
  /* 其他半偏移需求可以同理扩展，比如offset-l05（偏移0.5列）、offset-l15（偏移1.5列）等 */
}

/* 中等屏幕的半值偏移样式 */
@media only screen and (min-width: 600px) and (max-width: 991px) {
  .offset-m45 { margin-left: 37.5%; }
}

然后修改你的登录表单代码，把原来的offset-l4换成自定义的offset-l45：

<div class="col l3 offset-l45">你的登录表单内容</div>

小提示 #

记得把这些自定义CSS放在Materialize官方CSS文件之后，这样自定义样式的优先级更高，不会被默认样式覆盖。如果需要其他半值的列或偏移，都可以按照(n.5 / 12) * 100%的公式计算出对应的宽度或margin值，添加对应的类即可。

内容的提问来源于stack exchange，提问作者mufazmi