为什么我的表格内联课程不被尊重？答案

【问题标题】：Why won't my form-inline class be honoured?为什么我的表格内联课程不被尊重？
【发布时间】：2012-09-06 07:17:10
【问题描述】：

我正在使用内置的“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”类后呈现的表单：

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

【问题讨论】：

标签： ruby-on-rails twitter-bootstrap twitter-bootstrap-rails

【解决方案1】：

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

【讨论】：

看起来很到位。如果我将“span2”类传递给选择，它可以适合“form-inline”。有点蹩脚，我有点梦想它会自动调整大小并使其适合。

【解决方案2】：

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

一般html对象如果是display: inline会放在同一行，如果是display: block会显示在不同的行。

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

【讨论】：

遗憾的是，没有骰子。我可以看到 HTML 反映了“style="display: inline"" 的变化，但渲染保持不变。
如果您有 chrome 或 firefox，请尝试右键单击选择并提交按钮，然后“检查元素”。这将告诉您右侧的“计算样式”（包括在其他地方定义的样式）。然后，您将更好地了解可能导致线路变化的原因。