Ruby on rails 使用Twitter引导和简单表单2.0在一行上进行多个输入

我正在使用simple_form 2.0和twitter引导

我试图确定什么是合适的包装格式，以便获得类似的内容 [城市][州][Zip]

我相信我的表格需要修改

<div class="control-group">
  <%= f.input :city,:wrapper => :small, :placeholder => "City", :input_html => { :class=>"span2", :maxlength => 10},:label => false %>
  <%= f.input :region, :wrapper => :small , :placeholder => "Region", :input_html => { :class=>"span1", :maxlength => 5}, :label => false %>
  <%= f.input :postal_code, :wrapper => :small,  :placeholder => "Postal Code",:input_html => { :class=>"span2", :maxlength => 10},:label => false %>
</div>

---

我相信我也需要定义CSS，但在我进入兔子洞之前，我想我会问这是否内置在某个地方。

如果您不想标签，请将标签输入组件更改为如下输入：

config.wrappers :small, :tag => 'div', :class => 'controls inline-inputs' do |b|
  b.use :placeholder
  b.use :input
end

您不再需要传递

：label=>false

---

：error\u类

是不需要的，因为您没有使用error组件

这是一种替代方法，并且不需要引导（我假设它提供config.wrappers，因为这会在我的项目中引发异常，我没有使用TBS）：

---

有可能让简单的表单来做这件事。这将使用单个标签将输入放在一行上：

<%= form.input :city, label: 'City/State/Zip', input_html: {class: 'span3'}, wrapper_html: {class: 'controls controls-row'} do %>
  <%= form.input_field :city, class: 'span1' %>
  <%= form.input_field :state, class: 'span1' %>
  <%= form.input_field :zip, class: 'span1' %>
<% end %>

---

“span*”类是可选的。

使用引导，您可以添加span包装器

config/initializers/simple\u form\u bootsptrap.rb

app/assets/stylesheets/bootstrap\u和\u overrides.css.less

@red: #B94A48;

.control-group {
  clear: both;
}

.error .controls .help-inline{
  color: @red;
}

.error .control-label {
  color: @red;
}

.error .controls select{
  border: 1px solid #B94A48;
}

\u form.html.rb

<%= f.input :city,        :wrapper =>"span3" %>
<%= f.input :region,      :wrapper =>"span3" %>
<%= f.input :postal_code, :wrapper =>"span3" %>

“span3”%>
“span3”%>
“span3”%>

我的水平引导表单解决方案：

.control-group
  = f.label :password
  .controls.controls-row
    = f.input_field :password, :class => 'span2'
    = f.input_field :password_confirmation, :class => 'span2'

---

谢谢这为我指明了正确的方向。因为我只需要城市标签，所以我最后只做了与第一行相当的

。

input\uhtml

似乎实际上并没有进入输出，在我的例子中，包装器类在视觉上似乎并不重要。可能取决于您的引导版本等，我使用了“输入迷你”等而不是“span1”。只是指出简化是可能的。

config.wrappers :span3, :tag => 'div', :class => 'span3', :error_class => 'error' do |b|
  b.use :html5
  b.use :placeholder
  b.use :label
  b.wrapper :tag => 'div', :class => 'controls' do |ba|
    ba.use :input
    ba.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }
    ba.use :hint,  :wrap_with => { :tag => 'p', :class => 'help-block' }
  end
end

@red: #B94A48;

.control-group {
  clear: both;
}

.error .controls .help-inline{
  color: @red;
}

.error .control-label {
  color: @red;
}

.error .controls select{
  border: 1px solid #B94A48;
}

<%= f.input :city,        :wrapper =>"span3" %>
<%= f.input :region,      :wrapper =>"span3" %>
<%= f.input :postal_code, :wrapper =>"span3" %>

.control-group
  = f.label :password
  .controls.controls-row
    = f.input_field :password, :class => 'span2'
    = f.input_field :password_confirmation, :class => 'span2'