简单形式引导水平和内联答案

【问题标题】：simple form bootstrap horizontal and inline简单形式引导水平和内联
【发布时间】：2012-05-05 22:56:05
【问题描述】：

我正在使用 simple_form + bootstrap，但想知道是否可以使某些字段内联，而其他字段在同一表单中的标签下。

我什至希望将一个表格分成两列或更多列。

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

谢谢！

【问题讨论】：

标签： ruby-on-rails-3 twitter-bootstrap simple-form

【解决方案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' }

您可以阅读有关引导网格系统的文档： http://twitter.github.com/bootstrap/scaffolding.html

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

希望有帮助！

【讨论】：

简单表单链接集成链接坏了

【解决方案2】：

您始终可以通过修改表单元素的样式来根据自己的喜好排列字段。参考 2 列布局的任何谷歌搜索结果。例如 - this

【讨论】：

【解决方案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

【讨论】：