流出模態的表單元素和錯誤地彼此對齊

我正在嘗試創建一個簡單的模式表單，允許用戶輸入配方和相應的成分。我正在做一個快速的應用程序（所以使用Jade），但我已經將Jade轉換爲HTML並製作了a fiddle。流出模態的表單元素和錯誤地彼此對齊

奇怪的是，在本地運行應用程序時（附帶截圖），對齊錯誤與小提琴所產生的錯誤不同。

local error

藉口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將詹姆斯·金的建議

來源

2014-10-03 Philip O' Brien

請記住，在引導3類層次結構是容器 - >列 - >同事* - >內容 – DavidG 2014-10-03 11:48:21

取出所有<div class="row">和刪除類= 「表單橫向」。

所有.row是給你切緣陰性左右，導致你溢出模式

來源

2014-10-03 11:48:10

謝謝，對它進行排序 – 2014-10-03 13:19:51

流出模態的表單元素和錯誤地彼此對齊

回答

相關問題