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