Css Zurb Foundation表单字段的信息性帮助文本

我正在尝试将

.help block

从引导程序改为基础程序，但没有多大成功。。 问题是，输入框添加了一个边距底部，将每个元素推得离输入框太远，因此放在输入框下方的每个元素似乎都与输入框分离（因此帮助文本变得无用）

这是我表格的结构：

<form action="register" method="POST" role="form">
  <div class="row">
    <div class="small-12 columns">
      <div class="row collapse">
        <div class="small-1 columns">
          <span class="prefix fi-torso"></span>            
        </div>
        <div class="small-11 columns">
          <input type="text" id="username" name="username" placeholder="Username" required="required">
        </div>
        <small class="help-block">Help text</small>
      </div>
    </div>
  </div>
  ...
</form>

帮助块必须位于

div.small-11.columns

之外，因为我希望它与输入框的开头对齐，即

div.small-1.columns

中包含的前缀

我试着用谷歌搜索一下这个问题，但我得到的最多的结果是发现这是Foundation6的愿望列表中的一个功能。。

---

有什么帮助吗？

您只需覆盖默认的输入边距底部，即1rem。您当前有一个

用户名

id，因此我们可以将其用作css选择器：

<input type="text" id="username" name="username" placeholder="Username" required="required">

代码笔：

希望有帮助

<input type="text" id="username" name="username" placeholder="Username" required="required">

input#username {
  margin-bottom: 0.3125rem; /* 0.3125rem = 5px */
}