Bootstrap - 垂直对齐多个表单

Question

我在一个页面中有多个表单，每次只有一个标签，一个输入和一个提交。 如何在不使用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>

STUFF()

Answer 2

您可以尝试这种风格

.form-inline input{
  width: 60%;
float: left;
margin-right: 5px;
}
.form-inline label {
  float: left;
padding-right: 10px;
display: flex;
align-items: center;
height: 34px;
}