2012-05-05 3 views
8

Я работаю с simple_form + bootstrap, но хотел знать, можно ли сделать некоторые из полей встроенными и другие под меткой в ​​той же форме.простая форма бутстрапа горизонтальная и встроенная

Я мог бы даже сделать форму на две колонки или больше.

Есть ли способ достичь этого через обертки или, может быть, с помощью другого конструктора форм или стилей?

Спасибо!

ответ

16

Решение, которое я нашел, включает в себя использование классов «row» и «span», предоставляемых bootstrap, и вставки их в различные поля с использованием «wrapper_html», предоставленного простой формой.

Пример:

.container 
    ... 
    = simple_form_for(@stuff, :html => { :class => 'form-horizontal' }) do |f| 
     = f.error_notification 

     .form-inputs.row 
     = f.input :name, :wrapper_html => { :class => 'span6' } 
     = f.input :contact_name, :wrapper_html => { :class => 'span6' } 

     .form-inputs.row 
     = f.input :contact_email, :wrapper_html => { :class => 'span6' } 
     = f.input :contact_phone, :as => :string, :wrapper_html => { :class => 'span6' } 

Вы можете прочитать в Документах о системе сетки бутстрэпами: http://twitter.github.com/bootstrap/scaffolding.html

Или проверить некоторые примеры начальной загрузки и простой формы интеграции: http://simple-form-bootstrap.plataformatec.com.br/articles/new

Надежда что помогает!

0

Вы всегда можете упорядочить поля по своему вкусу, изменив стиль элементов формы. Обратитесь к любому из результатов поиска google из двух раскладок столбцов. Например: this

0

Вы также можете добавить поле к обертке (работал для меня):

.container 
    ... 
    = simple_form_for(@stuff, :html => { :class => 'form-horizontal' }) do |f| 
     = f.error_notification 

     = f.input :postal_code, :label => 'Postal code, house number', :wrapper => :append do 
     = f.input_field :postal_code 
     = f.input_field :street_number 
Смежные вопросы