javascript - 需要内联日期、月份和年份选择标签

Question

我在编辑用户个人资料页面中有一个生日字段，如图所示，

我希望它以这种方式水平显示

到目前为止，我正在使用以下代码，

在 visitors/edit.html.erb 中，

<%= simple_form_for([@user],:url => visitor_path(@user), method: :put, :class => 'form form-horizontal') do |f| %>
  <%= f.label :birthday %>      
  <div class="form-group">
    <div class="col-sm-2">
      <%= birthday_field_for(f, end_year: Date.today.year) %>
    </div>
  </div>
<% end %>

在 application_helper.rb 中，

def birthday_field_for(form,options={})
  date_field_for(form,:birthday,options.reverse_merge!(start_year: Date.today.year - 90, end_year: Date.today.year - 13))
end

def date_field_for(form,field,options={})
  form.date_select(field, options.reverse_merge!(order: [:day, :month, :year],
                                               include_blank: true))
end

请帮我解决 CSS。

Answer 1

感谢回答的人!

选择容器的宽度设置为 100%。因此，下一个选择选项卡出现在新行中。

在visitors/edit.html.erb中添加一个css，确实解决了我的问题，

<% content_for :head_css do %>
  <style type="text/css">
    .select2-container {
      width: 120px !important;
    }
  </style>
<% end %>