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

別の解決策は、次のように、HTML 出力に Bootstrap グリッド クラスの 1 つを追加することです。

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

「col-md-4」は親列幅の 3 分の 1 を使用するように設定されているため、3 つのフィールドすべてが 1 行に表示されると思います。

于 2015-08-23T11:46:08.293 に答える
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 に答える