0

組み込みの「form_for」ユーティリティを使用してフォームを定義しています。bootstrap-sass gem が定義されています (これは正しく適用されています)。何らかの理由で、ボタンが選択ボックスと同じ行に表示されません。

私の見解（レンダリングコードを表示）：

<%= form_for @checkin, html: {class: "form-inline" } do |f| %>
  <%= render 'shared/error_messages', object: f.object %>
  <%= collection_select(:checkin, :park_id, Park.all, :id, :name) %>
  <%= f.submit "Check in", class: "btn" %>
<% end %>

レンダリングされた HTML:

<form accept-charset="UTF-8" action="/checkins" class="form-inline" id="new_checkin" method="post">
  <div style="margin:0;padding:0;display:inline">
    <input name="utf8" type="hidden" value="&#x2713;" />
    <input name="authenticity_token" type="hidden" value="0AioAbZTS1DDqSUAJTemYX1hmspuISokx1IsWdNzADw=" />
  </div>

  <select id="checkin_park_id" name="checkin[park_id]">
    <option value="1">Moore Park</option>
    <option value="2">Moorish Park</option>
  </select>
  <input class="btn" name="commit" type="submit" value="Check in" />
</form>

レンダリングされた実際のフォーム:

1

そして、「form-inline」クラスを削除してレンダリングされたフォームは次のとおりです。

2

ボタンがレンダリングされる場所がわずかに変更されていることに注意してください。

4

2 に答える 2

0

問題はselect、Bootstrapの幅がに固定されていることです220px。これは、ボタンに追加されて、でオーバーフローします.span4。これを解決するには、何らかの方法（クラス、クラス、CSSスタイルなど）で
サイズを変更する必要があります。select.span2.input-small

于 2012-09-06T07:43:41.497 に答える
0

レンダリングは、要素のcssスタイルが原因である可能性があります。

通常、htmlオブジェクトは、ある場合は同じ行に配置され、ある場合はdisplay: inline別々の行に表示されますdisplay: block。

style="display: inline"[送信]ボタンをオンに設定してみてくださいselect（他のcssファイルでブロックとして表示するように定義されている場合）。それが機能する場合は、cssファイルに移動できます。

試す：

<%= collection_select(:checkin, :park_id, Park.all, :id, :name, {}, {style: "display: inline"}) %>

<%= f.submit "Check in", class: "btn", style: "display: inline" %>

インライン要素とブロック要素の表示が異なる場合があります。要素をインライン化する必要があるが、それでもブロックのように表示する場合は、ハイブリッドdisplay: inline-blockスタイルを試すことができます。

于 2012-09-06T07:20:03.063 に答える