为什么我的表格内联课程不会受到尊重？

Question

我正在使用内置的'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>

呈现的实际表单：

这是删除了“form-inline”类所呈现的表单：

请注意按钮呈现位置的细微变化。

Answer 1

渲染可能是由于元素上的CSS样式造成的。

一般情况下，html对象如果是display: inline则放在同一行，并且display: block时显示在不同的行上。

尝试在style="display: inline"和提交按钮上设置select（如果其他一些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样式。

Answer 2

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