Question

我对这应该是一件非常简单的任务感到非常麻烦。

我希望标题状态显示为与我的下拉列表相同的行，但它始终位于下一行。我使用Rails 4和bootstrap gem

<div class="status-area">

  <%= form_for project, {:class => "form-inline"} do |f| %>
    <div class="form-group">
      <h4>Status</h4>
      <%= f.select(:status, options_for_select(Status::STATUSES.collect { |s| [s.capitalize, s] }, project.status.to_s.downcase), {}, {:class => "form-control input-sm"}) %>
    </div>
    <%= f.submit 'Update Project Status', class: 'btn btn-default btn-sm', style: 'padding: 2px 10px;' %>
  <% end %>
</div>

还有一些帮助，弄清楚为什么下拉是该部门的全部宽度将有助于

Answer 1

首先，您需要将h4更改为标签标签（默认为内联）

<form class="form-inline">
    <div class="form-group"> 
        <label>Status</label>
         <select class="form-control input-sm"></select>
    </div>
   <input class='btn btn-default btn-sm' style='padding: 2px 10px;'/>
</form>

http://jsfiddle.net/bsgNQ/ - 将结果窗口拉伸到全宽。

其次，在Bootstrap教程中说，内联形式仅适用于视口中至少为768px宽的表单。因此，如果您的屏幕较窄，使用内联形式重建可能会很好。

显示标题内联下拉列表

1 个答案: