html - Rails field_with_errors 和 Bootstrap form-horizo​​ntal

Question

在我的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-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>

这是一个 jsfiddle来说明问题。

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

Answer 1

我用以下css修复了它：

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

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

Answer 2

你.control-group那里有一些无关的div。只需将error类添加到封闭的control-groupdiv 即可获得所需的结果：

<div class="control-group error">
  <label class="control-label" for="bookmark_url">Url</label>
  <div class="controls">
    <input id="bookmark_url" name="bookmark[url]" size="30" type="text" value="">
  </div>
</div>