Rails field_with_errors和Bootstrap形式 - 水平 [英] Rails field_with_errors and Bootstrap form-horizontal

问题描述

在我的 custom.css.scss 文件中，我有：

  .field_with_errors {
 @extend .control-group; 
 @extend .error;问题是，对于Bootstrap水平表单，字段将不会保持对齐。 
 
 
 
 HTML（由rails生成）为：
  div class =control-group> 
< div class =field_with_errors>< label class =control-labelfor =bookmark_url> Url< / label>< / div> 
< div class =controls> 
< div class =field_with_errors>< input id =bookmark_urlname =bookmark [url]size =30type =textvalue =>< / div ; 
< / div> 
< / div> 
  
  
 
 
 
任何人都知道如何解决这个问题？
解决方案
我用以下css修复它：
  .form- horizo​​ntal .field_with_errors 
 {
 margin：0; 
} 
 
 .form-horizo​​ntal .field_with_errors：before，.form-horizo​​ntal .field_with_errors :: after 
 {
 display：block; 
 clear：none; 
} 
  
 
In my custom.css.scss file, I have:
.field_with_errors {
  @extend .control-group;
  @extend .error;
}
The problem is that for Bootstrap horizontal forms, the fields will not remain alligned.

The HTML (generated by rails) is:
<div class="control-group">
    <div class="field_with_errors"><label class="control-label" for="bookmark_url">Url</label></div>
    <div class="controls">
      <div class="field_with_errors"><input id="bookmark_url" name="bookmark[url]" size="30" type="text" value=""></div>
    </div>
  </div>
Here is a jsfiddle to illustrate the problem.

Anyone know how to fix this?
解决方案
I fixed it with the following css:
.form-horizontal .field_with_errors
{
  margin: 0;
}

.form-horizontal .field_with_errors:before, .form-horizontal .field_with_errors::after 
{
  display: block;
  clear: none;
}


                        
这篇关于Rails field_with_errors和Bootstrap形式 - 水平的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！