Bootstrap form-inline控制重叠

Question

我正在使用Bootstrap 3构建内联表单，但我无法弄清楚如何防止输入重叠。我希望你能从屏幕截图中看到第三个输入重叠第二个和第四个重叠它。如何让它们彼此相邻？

以下是html的主要部分;

<div class="form-inline">
  <div class="form-group">
    <input class="form-control addon-input" id="units" name="units" placeholder="units" value="30" type="text">
  </div> 
  <div class="form-group">
    <input class="string optional form-control addon-input" id="unit_price" name="unit_price" placeholder="unit price" type="text">
  </div>
</div>