- 使用bootstrap

时间:2016-09-22 09:36:39

标签: ruby-on-rails twitter-bootstrap

我正在使用搜索表单的默认rails日期输入(自动生成日期,年份和月份的下拉输入)。

我正在使用bootstrap来塑造我的表单。

目前,表单如下所示:

enter image description here

但正如您在下面的代码中所看到的,我正在尝试将月/日/年输入并排。

<%= search_form_for @search do |f| %>
    <div id="header" id="index-header" class="header-slide">
      <div class="container">
        <div class="row">
          <div class="col-md-5">
            <div class="quick-search">
              <div class="row">
                <form role="form">
                  <div class="col-md-6 col-sm-6 col-xs-6">
                    <div class="form-group">
                      <label for="country">Area</label>
                      <%= f.select( :area_id_eq, Area.all.collect {|a| [ a.name, a.id ] }, {:prompt => "Any Area"}, class:'form-control')%>
                    </div>
                  </div>
                  <div class="col-md-6 col-sm-6 col-xs-6">
                    <div class="form-group">
                      <label for="bedroom">Rental Type</label>
                        <%= f.select( :rental_type_id_eq, RentalType.all.collect {|r| [ r.name, r.id ] }, {:prompt => "Short or Long Term"}, class:'form-control') %>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-3">
                    <div class="form-group">
                      <label>Minimum Bedrooms</label>
                      <%= f.number_field :beds_gteq, :step => 0.5, class:'form-control', value: 1 %>    
                    </div>
                  </div>
                  <div class="col-md-9 col-sm-9 col-xs-9">
                    <div class="form-group">
                      <label for="bathroom">Date Needed</label>
                      <%= f.date_select :from_date_lteq, {:prompt => { day: 'Any date', month: 'Any month', year: 'Any year' }, :default => nil, :start_year => Date.today.year, :end_year => Date.today.year + 2, :order => [:month, :day, :year]}, {class: 'form-control col-md-3 col-sm-3 col-xs-3'} %>
                    </div>
                  </div>
                  <div class="col-md-12 col-sm-12">
                    <%= f.submit "Search", class:'btn btn-success btn-lg btn-block' %>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
<% end %>

如何在rails date form helper中使用bootstrap格式化这些下拉列表?

0 个答案:

没有答案