Bootstrap - 豎直對齊多個表單

Question

我在一個頁面中獲得了多個表單，每次只有一個標籤，一個輸入和一個提交。 如何對齊verticaly標籤，輸入並提交而不使用col-md？

<form class="form-inline" action="action1.php" method="POST"> 
    <div class="form-group"> 
     <label for="input1">Email test</label> 
     <input type="text" class="form-control" id="input1" placeholder="Email" name="email"> 
    </div> 
    <button type="submit" class="btn btn-default">Submit 1</button> 
</form> 

<form class="form-inline" action="action2.php" method="POST"> 
    <div class="form-group"> 
     <label for="input2">Email</label> 
     <input type="text" class="form-control" id="input2" placeholder="Email" name="email"> 
    </div> 
    <button type="submit" class="btn btn-default">Submit 2</button> 
</form> 
... 
... 

參見：

https://jsfiddle.net/Lwss0606/

Answer 1

按照您發佈的UI圖像。使用col-md-x類爲表單元素提供網格結構。例如

<form class="form-inline" action="action1.php" method="POST"> 
      <div class="form-group"> 
       <label for="input1" class="col-md-3">Email test</label> 
       <input type="text" class="form-control col-md-6" id="input1" placeholder="Email" name="email"> 
       <button type="submit" class="btn btn-default col-md-3">Submit 1</button> 
      </div> 

     </form> 

DEMO