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 回答