Rails field_with_errors和Bootstrap形式水平

mih*_*hai 4 html css ruby-on-rails twitter-bootstrap

在我的custom.css.scss档案中,我有:

.field_with_errors {
  @extend .control-group;
  @extend .error;
}
Run Code Online (Sandbox Code Playgroud)

问题是对于Bootstrap水平表单,字段不会保持对齐.

HTML(由rails生成)是:

<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>
Run Code Online (Sandbox Code Playgroud)

这是一个解释问题的方法.

有人知道怎么修这个东西吗?

mih*_*hai 6

我用以下css修复它:

.form-horizontal .field_with_errors
{
  margin: 0;
}

.form-horizontal .field_with_errors:before, .form-horizontal .field_with_errors::after 
{
  display: block;
  clear: none;
}
Run Code Online (Sandbox Code Playgroud)