爲什麼我會在HTML元素之間重疊？

Question

我使用bootstrap 3.3.7。

我有這個網站：

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

這裏是WORKING JSfIDDLE

正如你可以看到小提琴我具備的要素之間的重疊。

任何想法爲什麼我重疊？

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/