我使用 Ruby on Rails 4 和 twitter bootstrap 来显示 form_for
(twitter bs form_horizontal
)。当 rails 包装 field_with_errors
div 中的元素时,下面的样式(标签、输入和提示彼此相邻显示)对于普通字段(无错误)正确工作,但是提示被放到下面输入元素。
<div class="control-group required">
<div class="field_with_errors"><label class="control-label" for="lot_commonname_id">Common Name</label></div>
<div class="controls">
<div class="field_with_errors"><select id="lot_commonname_id" name="lot[commonname_id]"><option value="">Please select</option>
<option value="1">x</option>
<option value="2">y</option>
<option value="3">z</option>
</select>
</div>
<div class="hint">
<a href="#" rel="tooltip" data-original-title="xyz test.">
<i class="icon-info-sign"></i>
</a>
</div>
</div>
</div>
.field_with_errors {
@extend .control-group;
@extend .error;
}
.form-horizontal .field_with_errors
{
margin: 0;
}
.form-horizontal .field_with_errors:before, .form-horizontal .field_with_errors::after
{
display: block;
clear: none;
}
以下jsfiddle http://jsfiddle.net/a78B5/6/演示问题
最佳答案
Divs 默认为 display:block,因此它会自然地下降到您输入的下方。添加样式以使用 display:inline 或 display:inline-block,它将移回文本框旁边。
关于css - 具有错误样式的 Ruby-on-rails Twitter Bootstrap 字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18855071/