simple_form 表单项连续出现而没有换行符？答案

【问题标题】：simple_form have form items appear in a row without a newline?simple_form 表单项连续出现而没有换行符？
【发布时间】：2012-03-28 23:34:21
【问题描述】：

是否有可能编写一个包装器或样式 simple_form 以使表单元素在一行中彼此相邻？

需要的是这样的：

搜索：[输入文本字段]国家[下拉文本字段]城市[下拉文本字段]

我正在使用

simple_form 2
twitter 引导程序 2

您目前可以设置 .form-horizontal 或 .form-vertical，通过向 CSS 添加规则或创建 simple_form 包装器来获得“内联 1 行表单元素显示”的最佳方式是什么？

更新一些haml/css：

= simple_form_for(@session, :html => { :class => 'form-horizontal' }) do |f|


  = f.input :age_from,
            :collection => 18..60,
            :default => 18,
            :blank =>false,
            :label => 'Age from',
            :item_wrapper_class => 'inline',
            :input_html => { :style => "width: 102px" },


  = f.input :age_to,
            :collection => 18..60,
            :default => 25,
            :blank => false,
            :label => 'Age to',
            :item_wrapper_class => 'inline',
            :input_html => { :style => "width: 102px" }

使用常规的引导 css 仅此而已。 item_wrapper_class 不适用于整个元素，就像集合中的单个单选按钮一样。

我需要一种很好的方法来内联包装完整的集合元素（年龄到和年龄从）

【问题讨论】：

标签： ruby-on-rails css ruby-on-rails-3 simple-form

【解决方案1】：

我无法向上面的人添加评论，因为我没有声誉，但只需通过指定上面级别的类来获取输入，然后使用您提供表单控件样式的 mixin使其与表单控件相同：

.form-group input {
  @include form-control-styling
}

【讨论】：

【解决方案2】：

您可以使用 .form-horizontal（对我来说是最简单和干净的解决方案）或编写自定义输入或自定义表单构建器。查看https://github.com/plataformatec/simple_form的文档。

【讨论】：

.form-horizontal 我试过了，但它在每个表单输入字段后开始换行。我检查编写自定义表单生成器而不是 thx
或者您可以使用 display:inline 或 display:inline-block 用于特定表单 id 选择器下的输入和标签。类似#my_form input { display: inline-block }
你应该使用.form-inline。
如果可以，请避免将 css 直接应用于输入。使用您已有的框架。

【解决方案3】：

最新版本的 bootstrap 有一个 form-inline 类。

= simple_form_for(@session, :html => { :class => 'form-inline' }) do |f|

您还可以创建自定义包装器。这是 bootstrap 文档中的标记：

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
  </div>
  ...
</form>

所以，如果您创建了一个自定义包装器（类似于）：

SimpleForm.setup do |config|
  config.wrappers :bootstrap, :tag => 'div', :class => 'form-group' do |b|
    b.use :label
    b.use :input
  end
end

这应该可以满足您的大部分需求。我还没有解决的部分是如何将“表单控制”类添加到输入中。

【讨论】：