![](/img/trans.png)
[英]Issues getting Ruby-on-Rails 6/Webpack + Bootstrap working properly together
[英]Ruby-on-rails Twitter Bootstrap field with error styling
我使用帶有Twitter Bootstrap的Ruby on Rails 4來顯示form_for
(twitter bs form_horizontal
)。 當rails將元素包裝在field_with_errors
div中但提示放到了input元素的下方時,下面的樣式對於普通字段(無錯誤)正確工作(標簽,輸入和提示彼此相鄰顯示)。
<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,它將移回到文本框旁邊。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.