javascript - 如何将 f.date_select 的月份、日期、年份放在单行上？

Question

我有一个 View 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>

View new.html.erb 显示如下

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

Answer 1

您的选择框有 form-control 类，它定义了 width: 100% 和 display: block。这意味着让它们都走同一行，你应该用一个容器包装选择框，然后使它们成为内联/内联 block 并设置一些宽度:

<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