css - Bootstrap 表单组行不起作用

Question

我不确定我在这里做错了什么。 form-group 类应该像 form-horizo​​ntal form 中的一行一样，对吗？这是代码。这是梦幻足球的添加/删除页面。

<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>