4

我在引导框架中使用了 form_for 助手。当我使用 date_select 时，它会为年、月和日期创建一个下拉框，但它们都在不同的行上。我想知道是否有任何方法可以让它们全部显示在同一行？我当前的表单 CSS 如下所示：

input, textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  padding: 10px;
  height: auto;
  margin-bottom: 15px;
  @include box_sizing;
}

作为对评论的回应，这里是 HTML：

<div class="row">
   <div class="span8 offset2">
      <%=form_for(@service) do|f|%>

         <%=f.label :date, "Date" %>
         <%=f.date_select :date, id: "dateField" %


         <%=f.submit "Add to Rota", class: "btn btn-large btn-primary" %>
      <% end %>
    </div>
</div>

提前感谢您的帮助！

4

3 回答 3

2

你有没有尝试过

float: left;
width: 150px;

宽度必须用左浮动来固定，以使元素“跟随”彼此。

于 2012-07-02T11:33:33.780 回答
1

Wawa Loo 的答案还可以，但它仍然让我有些头疼，找出在正确位置用“-”和“：”排列我的字段的最终解决方案，所以我也在这里发布我的答案。

这是我的广告系列 css 文件（我有开始和结束日期，我希望在其中设置日期时间）：

#campaign_startdatetime_1i,#campaign_enddatetime_1i{
  float:left;
  width: 100px;
  margin-right: 5px;

}
#campaign_startdatetime_2i,#campaign_enddatetime_2i{
  width: 150px;
}
#campaign_startdatetime_3i,#campaign_startdatetime_4i,#campaign_startdatetime_5i,
#campaign_enddatetime_3i,#campaign_enddatetime_4i,#campaign_enddatetime_5i{
  width: 75px;
}

正如您将注意到的，我只将 float:left 放在第一个输入上，因为如果我将其应用于所有“选择”框，那么分割日期和时间的“-”和“：”只会显得格格不入.

于 2012-09-24T22:20:51.793 回答
1

另一种解决方案是在 html 输出中添加一个 Bootstrap 网格类，如下所示：

<%= f.date_select :date, {}, { :class => "col-md-4" } %>

由于“col-md-4”设置为使用父列宽度的三分之一，我相信这将使您将所有三个字段都放在一行中。

于 2015-08-23T11:46:08.293 回答