2

ブートストラップを使用して、ラジオ ボタンでフォームのスタイルを設定しています。

残念ながら、display:inline はフォームのラジオ ボタンをインラインにしません。どちらも display:inline を css に移動していません。

<div class="row">
  <div class="span6 offset3">   
    <div style="display:inline">
      <%= f.label "status_open", "Open" %>
      <%= f.radio_button :status, 'Open' %> <br />
      <%= f.label "status_active",  "Active" %>
      <%= f.radio_button :status, 'Active' %> <br />
      <%= f.label "status_closed",  "Closed" %>
      <%= f.radio_button :status, 'Closed' %> <br />
      <%= f.label "status_matched", "Matched" %>
      <%= f.radio_button :status, 'Matched' %> <br />   
    </div>      
    <%= f.submit "Submit", class: "btn btn-large btn-primary" %>
    <% end %>
  </div>
</div>

ソース：

<div class="row">
<div class="span6 offset3">
<form accept-charset="UTF-8" action="/books" class="new_book" id="new_book"   method="post"><div style="margin:0;padding:0;display:inline"></div>

  <label for="book_title">Title</label>
  <input id="book_title" name="book[title]" size="30" type="text" />

  <label for="book_isbn">Isbn</label>
  <input id="book_isbn" name="book[isbn]" size="30" type="text" />

  <label for="book_edition">Edition</label>
  <input id="book_edition" name="book[edition]" size="30" type="text" />

  <label for="book_year">Year</label>
  <input id="book_year" name="book[year]" size="30" type="text" />

  <div style="display:inline">
  <label for="book_book_category_fiction">Fiction</label>
  <input id="book_category_fiction" name="book[category]" type="radio" value="Fiction" />
  <label for="book_book_category_non_fiction">Non-fiction</label>
  <input id="book_category_non-fiction" name="book[category]" type="radio" value="Non-fiction" />
  </div>
  <br />
  <input class="btn btn-large btn-custom-black" name="commit" type="submit" value="Create Book" />
</form>  
</div>
</div>

ボタンがインラインで表示されない理由について何か考えはありますか? どんな考えでも大歓迎です。

4

3 に答える 3

6

フォーム要素を互いにインラインで表示したい場合は、form-inlineクラスを使用する必要があります。

ソースで、次を変更します。<div style="display:inline">

に：<div class="form-inline">

そうすれば、あなたは正しい方向に向かうはずです。フォーム全体を Bootstrap チームによるガイド レイアウトによりインライン化するために行うことができる追加の更新が多数あります。

更新された例を次に示します: http://jsfiddle.net/dusthaines/GTUK9/

余談ですが、一般的には、ラジオ ボタンを左側に、対応するラベルを右側に配置するのがベスト プラクティスです。私の例は、この小さな更新も反映しています。

追加の詳細 @ http://twitter.github.com/bootstrap/base-css.html#forms

于 2013-02-28T20:58:57.067 に答える
2

一見すると<br/>、ラジオ ボタンの間にあるタグを削除したくなるかもしれません...

于 2013-02-28T16:17:59.710 に答える
0

display: inlineコンテナではなく、アイテム自体に適用する必要があります。詳細については、生成されたマークアップ (HTML) をリンクしてください。

于 2013-02-28T16:17:26.480 に答える