bootstrap form-group行无法正常工作

Question

我不确定我在这里做错了什么.表单组类应该像表格水平形式一样行,对吗？这是代码.这是梦幻足球的加/减页面.

<h2>Add/Drop Player</h2>
<div class="container">
  <%= form_tag(slot_do_add_drop_path(@slot), method: 'post', :html => {:class => 'form-horizontal', :role => 'form'}) do %>

    <div class="form-group">
      <div class="col-sm-2">Player to Drop</div>
    </div>
    <div class="form-group">
      <div class="col-sm-2"><%= @slot.player.display_name %> - <%= @slot.player.position %></div>
    </div>

    <div class="form-group">
      <div class="col-sm-2">Add Player</div>
    </div>
    <%= render partial: "free_agent_select", locals: {free_agents: @free_agents_qbs, p_id: 'qb_id', prompt: 'Select QB'}%>
    <%= render partial: "free_agent_select", locals: {free_agents: @free_agents_wrs, p_id: 'wr_id', prompt: 'Select WR'}%>
    <%= render partial: "free_agent_select", locals: {free_agents: @free_agents_rbs, p_id: 'rb_id', prompt: 'Select RB'}%>
    <%= render partial: "free_agent_select", locals: {free_agents: @free_agents_tes, p_id: 'te_id', prompt: 'Select TE'}%>
    <%= render partial: "free_agent_select", locals: {free_agents: @free_agents_ks, p_id: 'k_id', prompt: 'Select K'}%>
    <%= render partial: "free_agent_select", locals: {free_agents: @free_agents_defs, p_id: 'def_id', prompt: 'Select DEF'}%>
    <div class="form-group">
      <div class="col-sm-2">
        <%= submit_tag 'Submit', name: 'add_drop_player', class: 'form-control'%>
      </div>
    </div>
  <% end %>
</div>

部分free_agent_select

<div class="form-group">
  <div class="col-md-2">
    <%= collection_select :player, p_id, free_agents, :id, :display_name, {:prompt => prompt}, {:class => 'form-control'} %>
  </div>
</div>

Answer 1

您应该为每个新的"行"使用行类来解决这样的重叠问题.

<div class="form-group row">
  <div class="col-sm-2">Player to Drop</div>
</div>