如何将f.date_select的月,日,年放在单行上？

Question

我有一个视图new.html.erb

<div class="container">      
<div class="row">
<div class="col-md-4 col-md-offset-4">
.
.
<%= f.label :date_of_birth %><br />
<%= f.date_select :date_of_birth, { :start_year => 1920, :end_year => 2010 }, :class => 'form-control date-select' %>
.
.
</div>
</div>
</div>

视图new.html.erb显示如下

我正在使用Twitter Bootstrap而我没有使用Devise gem.
有什么办法可以在同一行显示所有三个列表框吗？

Answer 1

您的选择框具有form-control定义width: 100%和的类display: block.这意味着要使它们全部采用相同的行,你应该用另外一个容器包装selectbox,然后使它们成为内联/内联块并设置一些宽度:

<div class="col-md-4 col-md-offset-4">
    ...
    <label>Date of birth</label> 
    <div>
        <select name="date_of_birth" class="form-control date-select"></select>
        <select name="month_of_birth" class="form-control date-select"></select>
        <select name="day_of_birth" class="form-control date-select"></select>
    </div>
    ...
</div>

并为.date-select类定义此CSS样式:

.date-select { 
    display: inline-block;
    width: 30%;
}

插图:http://plnkr.co/edit/00izoqhM3nfquNieFNwe?p=preview