为什么我会在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/