hình thức đơn giản bootstrap ngang và nội tuyến

Question

Tôi đang làm việc với simple_form + bootstrap, nhưng muốn biết liệu có thể làm cho một số trường đi vào nội tuyến và những trường khác dưới nhãn trong cùng một biểu mẫu hay không.

Tôi có khả năng muốn tạo biểu mẫu thành hai cột trở lên.

Có cách nào để đạt được điều này thông qua trình bao bọc hoặc có thể thông qua trình tạo biểu mẫu hoặc kiểu tạo khác không?

Cảm ơn bạn!

Answer 1

Giải pháp mà tôi đã tìm thấy bao gồm sử dụng các lớp 'hàng' và 'khoảng' được cung cấp bởi bootstrap và chèn chúng vào các trường khác nhau bằng cách sử dụng 'wrapper_html'.

Ví dụ:

.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' } 

Bạn có thể đọc lên trong Documents về bootstraps hệ thống lưới điện: http://twitter.github.com/bootstrap/scaffolding.html

Hoặc kiểm tra một số ví dụ về bootstrap và tích hợp hình thức đơn giản: http://simple-form-bootstrap.plataformatec.com.br/articles/new

Hope những sự giúp đỡ đó!

Answer 2

Bạn luôn có thể sắp xếp các trường theo ý thích của mình bằng cách sửa đổi kiểu của các phần tử biểu mẫu. Tham khảo bất kỳ kết quả tìm kiếm nào của google trong 2 bố cục cột. Ví dụ - this

Answer 3

Bạn cũng có thể thêm lĩnh vực này để các wrapper (làm việc cho tôi):

.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