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

Question

我正在尝试将 .help-block 从 Bootstrap 调整为 Foundation，但没有取得太大成功。问题是输入框添加了一个 margin-bottom 将每个元素推离它太远，因此放在它下面的每个元素似乎都与输入框分开了（因此帮助文本变得无用）。

这是我的表单结构：

<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>

我从 Bootstrap 中获取了 .help-block CSS 来查看我是否可以根据我的情况调整它但不幸的是我没有成功：更改边距顶部（负.help-block 上的值）以抵消输入的边距底部，将帮助文本引导至输入框上方的运行：

.help-block {
  display: block;
  margin-top: 5px; /*Negative margin creates rendering issues*/
  margin-bottom: 10px;
  color: #737373;
}

帮助块必须位于 div.small-11.columns 之外，因为我希望它与输入框的开头对齐，即 div.small-1.columns.

中包含的前缀

我试图 google 解决这个问题，但我得到的最多的是发现这是 Foundation 6 愿望清单中的一个功能。有帮助吗？

Answer 1

你可以只覆盖 Foundations 默认的输入 margin-bottom，即 1rem。您目前有一个 username id，因此我们可以将其用作 css 选择器：

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

要覆盖默认值，请在下面添加 css，确保在 id 之前包含输入：

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

代码笔：http://codepen.io/thmsmtylr/pen/KdVEVd

希望对您有所帮助。

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

Informative help text for form fields with Zurb Foundation

css

twitter-bootstrap-3

zurb-foundation

zurb-foundation-5