形式元素流出Modal＆amp;彼此不正确地对齐

Question

我正在尝试创建一个简单的模态表单，允许用户输入配方和相应的成分。我正在做它作为一个快速应用程序（所以使用Jade），但我已将Jade转换为HTML并制作a fiddle。

在本地运行应用程序（附带屏幕截图）时奇怪的是，对齐错误与小提琴生成的对齐错误不同。

请原谅HTML混乱，我已经足够新了，并且犯了将文档中看起来合理的东西放在一起。

模态体HTML（我想象的是令人讨厌的代码片段）如下所示

<div class="modal-body">
  <form id="submitRecipe" role="form" method="post" class="form-horizontal">
    <div class="row">
      <div class="form-group">
        <input type="text" name="recipeName" placeholder="recipe name" autocomplete="off" class="form-control"/>
      </div>
    </div>
    <div class="row">
      <div class="form-group">
        <div class="form-inline recipeRow">
          <div class="form-group">
            <input type="text" name="ingredient" placeholder="ingredient" class="form-control"/>
          </div>
          <div class="form-group">
            <input type="text" name="quantity" placeholder="quantity" class="form-control"/>
          </div>
          <div class="form-group">
            <select class="form-control">
              <option>g</option>
              <option>tsp</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div class="form-group">
      <input id="add-row" type="button" name="add-row" value="Add row" class="btn btn-default"/>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

以下是the updated fiddle应用James King的建议

Answer 1

取出所有<div class="row">并删除class =＆＃34; form-horizo​​ntal＆＃34;从你的表格。

所有.row都会向左和向右给出负边距，导致你溢出模态