获取 Rails 日期选择表单助手以显示在单行上答案

【问题标题】：Get Rails Date Select Form Helper to display on a single line获取 Rails 日期选择表单助手以显示在单行上
【发布时间】：2023-03-13 04:41:01
【问题描述】：

我在引导框架中使用了 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>

提前感谢您的帮助！

【问题讨论】：

你能发布你的html源代码吗？
@WawaLoo 这是添加的html源代码
我说的是浏览器中的 HTML 源代码，而不是视图代码。这样我们就可以查看元素、类和 id。
无论如何，答案都有效，非常感谢。
嗨@FantasticMrK，你能发布你的最终解决方案吗？建议只是将每个字段“粘合”在一起，右侧的“-”和“：”分隔符......

标签： css ruby-on-rails forms twitter-bootstrap

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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 放在第一个输入上，因为如果我将其应用于所有“选择”框，则分割日期和时间的“-”和“：”只会出现不合适。

【讨论】：

【解决方案3】：

你试过了吗

float: left;
width: 150px;

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

【讨论】：