Question

我正在使用带引导框架的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>

提前感谢您的帮助！

Answer 1

你试过吗

float: left;
width: 150px;

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

Answer 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;
}

正如您将注意到的，我只将浮动：左侧放在第一个输入上，因为如果我将它应用于所有“选择”框，而不是“ - ”分割日期和时间，“：”就会出现不合适。

Answer 3

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

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

因为＆＃34; col-md-4＆＃34;设置为使用父列宽度的三分之一，这将使您在一行中留下所有三个字段我相信。

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

3 个答案: