부트 스트랩 폼 그룹 행이 작동하지 않습니다.

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> 

당신은이 같은 중복 문제를 해결하기 위해 각각의 새로운 "행"에 대한 행 클래스를 사용해야합니다

<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

부분 free_agent_select.

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

Answer 2

form-group은 부유 요소를 래핑하지 않습니다. 이 예에서 .col-xx-xx를 가진 모든 요소는 컨테이너에 float를 추가합니다. .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)을 사용하여 수정했습니다.

 <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 부트 스트랩을 사용 같은 기본 코드를 떠나 : 나는 4.0 부트 스트랩 변경하는 경우 그러나, 나는 나의 제안은 그래서 모두가 기본적으로 잘 작동 것을 알아 냈다.