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

我拿了.help-block来自 Bootstrap 的 CSS，看看我是否可以根据我的情况调整它，但不幸的是我没有成功:更改 .help-block 上的边距顶部(负值)为了抵消输入的 margin-bottom 导致帮助文本在输入框上运行:

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

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

我试着用谷歌搜索一下这个问题，但我得到的最多的是发现这是 Foundation 6 愿望 list 中的一个功能。有帮助吗？

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

希望对您有所帮助。