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

渲染可能是由于元素上的 css 样式。

一般来说，如果 html 对象位于同一行，则将它们放在同一行上display: inline，而当它们位于同一行时，则显示在不同的行上display: block。

尝试设置style="display: inline"on the selectand submit 按钮（以防某些其他 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 回答
0

问题是selectBootstrap 中的固定宽度为220px. 这个，添加到您的按钮溢出在您的.span4.
要解决它，您必须以select任何方式调整您的大小（.span2类、.input-small类、CSS 样式等）

于 2012-09-06T07:43:41.497 回答