獲取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以在單行上顯示

回答

相關問題