Question

我正在使用simple_form + bootstrap，但是想知道是否有可能使某些字段以内联方式进行，而其他字段则以相同的形式进行。

我甚至可能希望将表单分成两列或更多列。

有没有办法通过包装器或者通过不同的表单构建器或样式来实现这一点？

谢谢！

Answer 1

我找到的解决方案包括使用bootstrap提供的'row'和'span'类，并使用简单表单提供的'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' }

您可以在Docs中阅读有关bootstraps网格系统的信息： http://twitter.github.com/bootstrap/scaffolding.html

或者查看一些bootstrap和简单表单集成的示例： http://simple-form-bootstrap.plataformatec.com.br/articles/new

希望有所帮助！

Answer 2

您可以随时通过修改表单元素的样式来排列字段。请参阅2列布局的任何Google搜索结果。例如 - this

Answer 3

您还可以将字段附加到包装器（为我工作）：

 .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

简单形式bootstrap水平和内联

3 个答案: