Materialize主题表单两列间距异常问题求助

嘿，我仔细看了你的代码，一下子就找到问题根源了——你在嵌套列的时候违反了Materialize网格系统的核心规则！

Materialize的12列网格要求严格的层级结构：必须是 row 包裹 col，如果要在 col 里再嵌套列，必须先加一个内层的 row，再在里面放子列。你的代码里有好几处直接在 col s6 里放了子 col，没有包裹内层 row，这就导致默认的网格padding和布局逻辑冲突，产生了多余的间距。

具体错误位置举例 #

比如第三个row里的右侧列：

<div class="col s6">
  <div class="input-field col s6">...</div>
  <div class="input-field col s6">...</div>
</div>

这里的子col s6直接放在了父col s6里，没有内层row，这就是间距异常的元凶。同样的问题还出现在第四个row的右侧列、第六个row的两个col s6内部。

修复方案 #

给所有嵌套列的外层col里加上内层row，比如上面的代码要改成：

<div class="col s6">
  <div class="row"> <!-- 新增内层row -->
    <div class="input-field col s6">
      <input type="text" name="zip" id="zip" pattern="[0-9]{5}" placeholder="Postleitzahl" class="validate" required>
      <label for="zip" class="active">Postleitzahl</label>
    </div>
    <div class="input-field col s6">
      <input type="text" name="city" id="city" placeholder="Stadt" class="validate">
      <label for="city" class="active">Stadt</label>
    </div>
  </div>
</div>

按照这个逻辑，把所有类似的嵌套列都加上内层row，整个表单的列间距就会完全符合Materialize的设计规范，不会再出现异常间距了。

你之前试各种div类没用，是因为没从网格层级结构上解决问题，只是调整表面样式，自然达不到理想效果。

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