html - 表单元素流出模态并且彼此不正确对齐

Question

我正在尝试创建一个简单的模态表单，允许用户输入食谱和相应的成分。我把它作为一个快速应用程序来做(所以使用 Jade)但是我已经将 Jade 转换为 HTML 并制作了 a fiddle .

奇怪的是，在本地运行应用程序时(随附屏幕截图)对齐错误与 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="form-horizo​​ntal"。

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