css - 如何将我的错误消息与 Ruby on Rails 的 Simple_form 对齐？

Question

目前，我的表单看起来像这样并带有一条错误消息(名称是必填字段):

但我想将“不能为空”错误放在“名称”旁边，如下所示:

通过使用以下代码更改默认 Bootstrap Simple_form 类，我在“名称”标签和错误方面给了自己更多的自由:

<%= f.input :name, :required => true, :label_html => { :class => 'edit_form_titles' }, :error_html => { :class => 'cant_be_blank'} %>

这些类的 CSS 是:

  .edit_form_titles{
  display: block;
  margin-bottom: 0px;
  color: #333333;
  }

  .cant_be_blank{
  font-size:12px;
  }

关于如何按照我的描述将错误消息与名称对齐？感谢您的帮助。

Answer 1

我设法让我的错误显示在输入框上方的标签中。

用下面的代码我给了我的错误一个类，它可以格式化为定位等，但是输入框下面总是有一个空白的 div 或其他东西，这使得它下面的其他输入框脱节.

<%= f.input :name, :required => true, :label_html => { :class => 'edit_form_titles' }, :error_html => { :class => 'cant_be_blank'} %>

在我的 initializers/simple_form.rb 中有:

  config.wrappers :bootstrap, :tag => 'div', :class => 'control-group', :error_class => 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label
    b.wrapper :tag => 'div', :class => 'controls' do |input|
      input.use :input
      input.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }
      input.use :hint,  :wrap_with => { :tag => 'p', :class => 'help-block' }
    end
  end

我将其更改为:

 config.wrappers :bootstrap, :tag => 'div', :class => 'control-group', :error_class => 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.wrapper :tag => 'div', :class => 'label-error' do |input|
      b.use :label
      b.use :error, :wrap_with => { :tag => 'span', :class => 'help-block' }
    end
    b.wrapper :tag => 'div', :class => 'controls' do |ba|
      ba.use :input
      ba.use :hint,  :wrap_with => { :tag => 'p', :class => 'help-block' }
    end
  end

这消除了输入框下方的空白空间，我可以格式化我的 cant_be_blank 类，使文本正好出现在我标签中的文本旁边。