我正在尝试调整 .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 中的一个功能。 有帮助吗?
最佳答案
您可以覆盖 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
希望对您有所帮助。
关于css - Zurb Foundation 表单字段的信息帮助文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32555358/