HTML 요소가 겹치는 이유는 무엇입니까?

Question

부트 스트랩 3.3.7을 사용합니다. 만약 전 소자 사이의 오버랩을 바이올린에 볼 수있는 바와 같이

HERE

<div class="container-fluid removeSpaceLeft-15 removeSpaceRight-15"> 
    <div class="col-xs-4 removeSpaceLeft-15 removeSpaceRight-15"> 
     <input type="text" class="form-control btn-sm" id="maxFeatures" value="0" /> 
    </div> 
    <div class="col-xs-5 removeSpaceLeft-15 removeSpaceRight-15"> 
     <label for="maxFeatures">max results: </label> 
    </div> 
    <div class="col-xs-3 removeSpaceLeft-15 removeSpaceRight-15"> 
     <input type="button" class="btn btn-default btn-sm" id="btnExecute" value="Submit" /> 
    </div> 
</div> 

<hr /> 



<div class="container-fluid nopadding"> 
    <div class="panel panel-default"> 
     <div class="panel-heading">Select layer</div> 
     <div class="panel-body"> 
      <select id="layerName1" class="form-control" style="max-width: 100%!important"></select> 
     </div> 
    </div> 
</div> 

하는 JSfIDDLE

를 작동 :

는 I이 HTML을 갖는다.

내가 왜 겹치는 지 아십니까?

Answer 1

당신은 행을 누락 :

<div class="container-fluid removeSpaceLeft-15 removeSpaceRight-15"> 
    <div class="row"> 
     <div class="col-xs-4 removeSpaceLeft-15 removeSpaceRight-15"> 
      <input type="text" class="form-control btn-sm" id="maxFeatures" value="0"> 
     </div> 
     <div class="col-xs-5 removeSpaceLeft-15 removeSpaceRight-15"> 
      <label for="maxFeatures">max results: </label> 
     </div> 
     <div class="col-xs-3 removeSpaceLeft-15 removeSpaceRight-15"> 
      <input type="button" class="btn btn-default btn-sm" id="btnExecute" value="Submit"> 
     </div> 
    </div> 
</div> 

부트 스트랩은 열을 행에 중첩 할 뻔 행 컨테이너에 중첩. 이 사이트는 부트 스트랩의 유효성을 확인할 수 있습니다 : http://www.bootlint.com/