Question

我正在使用bootstrap来设置带有单选按钮的表单。

不幸的是显示：内联不会使表单上的单选按钮内联。也没有移动显示：内联到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

Answer 2

乍一看，您可能希望删除单选按钮之间的<br/>标记...

Answer 3

display: inline应该应用于项目本身，而不是容器。请链接生成的标记（HTML）以获得更多帮助。

强制单选按钮显示内联

3 个答案: