引导表单组行不起作用

Posted 2023-03-06

【中文标题】引导表单组行不起作用

【英文标题】：bootstrap form-group rows not working

【发布时间】：2014-11-01 20:08:15

【问题描述】：

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

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

【问题讨论】：

嘿，丹，你能发布渲染的 HTML 吗？

您是否尝试过像 Bootstrap 示例文档中那样将提交移出表单组？

【参考方案1】：

您应该为每个新“行”使用一个行类来解决这样的重叠问题。

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

【讨论】：

你能解释一下什么是重叠的，为什么？我遇到了同样的问题，但你的回答帮助了我。

【参考方案2】：

需要注意的是 form-group 不会包裹浮动元素。在这种情况下，所有带有 .col-xx-xx 的元素都会在其容器中添加一个浮点数。添加 .row 的类名只是添加了将 ::before 和 ::after 元素添加到元素（在本例中为 div）然后将 clear:both 的 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>

【参考方案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>

并使用引导程序 4.0。