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>

Answer 2

应该注意的是，form-group不会包含浮动元素。在这个例子中，所有带有.col-xx-xx的元素都会向它的容器添加一个浮点数。添加.row的类名简单地添加了清除 - 将:: before和:: after元素添加到元素（在本例中为div），然后将clear的css属性应用于这些元素。您不需要将.row的类名添加到父元素中，只需添加.clearfix作为类。因为它纯粹是语义，所以决定取决于你。

<div class="form-group">
  <label for="firstName">First Name</label>
  <input id="firstName" name="firstName" class="form-control" />
</div>
<div class="form-group clearfix">
  <div class="col-sm-3"><a href="javascript:void(0);" class="btn btn-primary">CLEAR INFORMATION</a></div>
  <div class="col-sm-3"><button class="btn btn-default" type="submit">SUBMIT</button></div>      
</div>

Answer 3

我遇到了类似的问题并使用Zanderi的建议（clearfix）修复了它。 但是，当我更改为bootstrap 4.0时，我发现默认情况下一切正常，所以我的建议是：保留默认代码，例如：

        <form class="dropdown-menu dropdown-menu-right" style="padding: 15px">
            <div class="form-group">
                <label>Nombre</label>
                <input class="form-control" id="name" placeholder="Nombre">
            </div>
            <div class="form-group">
                <label>Imagen</label>
                <input class="form-control" type="file" id="image">
            </div>
            <button type="submit" class="btn btn-default pull-right">Guardar</button>
        </form>

并使用bootstrap 4.0。