なぜHTML要素が重複するのですか？

Question

私はブートストラップ3.3.7を使用します。

私はこのHTMLを持っている：あなたは、私は要素間の重なりがフィドルで見ることができるよう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

を進めています。

なぜ重複しているのですか？

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/