获取Rails日期选择Form Helper以在单行上显示

我正在使用form_for助手和bootstrap框架。当我使用date_select时，它会为年，月和日期创建一个下拉框，但它们都在不同的行上。我想知道是否有任何方法让他们都显示在同一行？我对目前的形式CSS是这样的：获取Rails日期选择Form Helper以在单行上显示

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>

在此先感谢您的帮助！

来源

2012-07-02 TangoKilo

你能发表你的html源代码吗？ –

@WawaLoo这是添加的html源代码 – TangoKilo

我正在谈论你的浏览器的HTML源代码，而不是视图代码。这样我们就可以看看元素，类和ID。 –

你试过

float: left; 
width: 150px;

宽度必须固定与浮动离开，使元素“关注”对方。

来源

2012-07-02 11:33:33

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

正如你会发现，我只把浮动：留在第一输入，因为如果我将它应用到所有“选择”框中，比将“日期和时间”分开的“ - ”和“：”将显得不合适。

来源

2012-09-24 22:20:51 MrWater

另一种解决方案是添加自举网格类中的一个来的HTML输出，这样的：

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

由于“COL-MD-4”被设置为使用了父列宽度的三分之一，那会让你把所有三个领域都放在一个我认为相同的领域。

来源

2015-08-23 11:46:08 ostraperlera

获取Rails日期选择Form Helper以在单行上显示

回答

相关问题