强制单选按钮显示内联

Question

我正在使用引导程序通过单选按钮设置表单样式。

不幸的是，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>

关于为什么按钮没有内联显示的任何想法？任何想法都将不胜感激。

Answer 1

如果希望表单元素彼此内联显示，则需要使用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