Question

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

需要的是这样的：

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

我正在使用

simple_form 2
twitter bootstrap 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" }

使用常规bootstrap css还没有。 item_wrapper_class不适用于整个元素，就像集合中的单个单选按钮一样。

我需要一个很好的方法来将整个集合元素内联（年龄和年龄）

包装起来

Answer 1

我无法向上面的人添加评论，因为我没有声望，只是通过指定上面级别的类来获取输入，然后使用你给出form-control的样式的mixin使其与表单控件相同：

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

Answer 2

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

Answer 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

这应该完成你需要的大部分工作。我还没有解决的部分是如何在输入中添加'form-control'类。

simple_form有没有换行符的行中出现的表单项？

3 个答案: