Rails error message break formup form

Question

Я следую этому руководству: http://ruby.railstutorial.org/chapters/sign-up#top, и у меня есть проблема со стилями для сообщений об ошибках из рельсов.

Я хочу сделать это:

Но вместо того, чтобы моя форма перерывов и я получаю эту уродливую форму:

Я проверил исходный код и есть новых тегов div вместо метки и ввода:

Как переопределить это поведение и выполнить эту форму, выделено только как в учебнике?

спасибо.

EDIT 1:

Я узнал, где проблема. Я использую Bootstrap 3.1.0, и расширение там не работает. Таким образом, это не работает:

#error_explanation { 
    color: #f00; 
    ul { 
    list-style: none; 
    margin: 0 0 18px 0; 
    } 
} 

.field_with_errors { 
    @extend .control-group; 
    @extend .error; 
} 

И из-за того, что этот код не работает, как он должен:

<% if @user.errors.any? %> 
    <div id="error_explanation"> 
    <div class="alert alert-error"> 
     The form contains <%= pluralize(@user.errors.count, "error") %>. 
    </div> 
    <ul> 
    <% @user.errors.full_messages.each do |msg| %> 
     <li>* <%= msg %></li> 
    <% end %> 
    </ul> 
    </div> 
<% end %> 

я не могу найти способ сделать что продлить работу. Подобно контрольной группе нет ...

EDIT 2:

Хорошо, когда я добавить этот код в config/environment.rb форма не ломается, но не может выполнить красные линии вокруг форм, где неправильно вход:

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance| 
    html_tag.html_safe 

Answer 1

Почему вы используете Bootstrap 3? В учебном пособии вам будет предложено использовать

gem 'bootstrap-sass', '2.3.2.0' 

в вашем gemfile. Вы действительно должны это сделать, потому что учебник предоставляет вам целый ряд кода, который предназначен для использования с Bootstrap 2. Конечно, он ломается с Bootstrap 3. Если вы действительно хотите использовать B3, вам придется изменить довольно несколько имен классов в ваших представлениях. Среди других изменений это сделать:

• изменения div class="alert alert-error" к
• применять form-group и form-control классов для ваших полей формы (смотрите пример here).

• в вашем CSS:

  .field_with_errors { 
      @extend .has-error; 
  } 
  

• Затем сделайте все другие изменения, указанные here.

Answer 2

Это кажется, довольно распространенную ошибку - вы когда-нибудь пробовали либо из них:

• Rails field_with_errors and Bootstrap form-horizontal
• Ruby field_with_errors doesn't @extend .control-group .error

@extend documentation

---

Прекомпиляция

В противном случае, вы можете попробовать Прекомпиляция активов:

#config/environments/production.rb 
config.serve_static_assets = true 
config.assets.compile = false 

$ rake assets:precompile RAILS_ENV=production 

---

Mixins

Это не зафиксирует его напрямую, но вы можете создать подмешать для стилей, и включают в себя, что, как это:

@mixin error { 
    display: block; 
    etc 
} 

.field_with_errors { 
    @extend .control-group; 
    @extend .error; 
}