Bootstrap form-inline indenting

Question

所以我第一次在bootstrap工作，我正在制作一个表格，如下：

<div class="input-group col-xs-2">
    <label>Voornaam:</label>
    <input type="text" class="form-control" placeholder="Voornaam">
</div>
<div class="input-group col-xs-2">
    <label>Achternaam:</label>
    <input type="text" class="form-control" placeholder="Achternaam">
</div>
<div class="input-group">
     <label for="adresCaptain" class="control-label">Straatnaam + nr:</label>
     <div>
         <div class="form-inline">
             <div class="form-group col-xs-9">
                 <input type="text" class="form-control" id="streetCaptain" placeholder="Straat"/>
             </div>
             <div class="form-group col-xs-3">
                  <input type="number" class="form-control" id="houseNrCaptain" placeholder="Nr"/>
             </div>
         </div>
      </div>
</div>

现在，我对“form-inline”部分的缩进有问题。出于某种原因，它比表单的其他部分更加缩进。

结果图片：http://puu.sh/g874J/2579b314e4.png

知道为什么会出现这种情况以及我如何才能使表单的每个部分的缩进都相同？

Answer 1

您的col-xs-X课程会为div添加额外的填充。