Question

使用简单形式的Rails 4＆amp; Zurb Foundation 5。

当使用输入date_of_birth时，我很难得到简单表单来围绕自动创建的选择字段包装div。我到目前为止的代码如下：

<div class = "row">
<div class = "medium-12 columns">
    <%= form.input :date_of_birth, as: :date, 
                                   end_year: Date.today.year - 2, 
                                   start_year: Date.today.year - 90, 
                                   order: [:day, :month, :year]%>
</div>
</div>

此简单表单代码使用输出HTML创建this (pic)，如下所示：

<div class="row">
<div class="medium-12 columns">
    <div class="input date optional person_date_of_birth">
        <label class="date optional control-label" for="person_date_of_birth_3i">Date of birth</label>
        <select class="date optional" id="person_date_of_birth_3i" name="person[date_of_birth(3i)]">
            <option>...</option>
        </select>
        <select class="date optional" id="person_date_of_birth_2i" name="person[date_of_birth(2i)]">
            <option>...</option>
        </select>
        <select class="date optional" id="person_date_of_birth_1i" name="person[date_of_birth(1i)]">
            <option>...</option>
        </select>
    </div>
</div>
</div>

我希望它看起来像this (pic)，HTML输出类似于下面的每个选择字段都包含在div中，所以我可以指定网格大小。

<div class="row">
<div class="medium-12 columns">
    <div class="input date optional person_date_of_birth">
        <label class="date optional control-label" for="person_date_of_birth_3i">Date of birth</label>
        <div class="medium-4 columns">
            <select class="date optional" id="person_date_of_birth_3i" name="person[date_of_birth(3i)]">
                <option>...</option>
            </select>
        </div>
        <div class="medium-4 columns">
            <select class="date optional" id="person_date_of_birth_2i" name="person[date_of_birth(2i)]">
                <option>...</option>
            </select>
        </div>
        <div class="medium-4 columns">
            <select class="date optional" id="person_date_of_birth_1i" name="person[date_of_birth(1i)]">
                <option>...</option>
            </select>
        </div>
    </div>
</div>
</div>

Answer 1

使用input_html选项将类添加到每个选择

<div class = "row">
<div class = "medium-12 columns">
    <%= form.input :date_of_birth, as: :date, 
                                   end_year: Date.today.year - 2, 
                                   start_year: Date.today.year - 90, 
                                   order: [:day, :month, :year],
                                   input_html: {class: "medium-12 columns"}%>
</div>
</div>

看看这个post在文档加载中使用jquery添加div，如

$('select[id*="date_of_birth"]').wrapAll('<div class="medium-12 columns">');

Answer 2

也可以使用CSS：

  .medium-12.columns select {
    display: inline-block;
    width:33%;
  }

如何使用simple_form在水平布局中放置自动创建的选择字段

2 个答案: