Question

我有一个带有引导类col-lg-x的表单来构建两个内联输入和一个过滤器按钮。

我无法将按钮与任何连接到form-groups / form-control bootstrap类的类对齐。

<form method="POST" action="example.com" accept-charset="UTF-8">
<div class="form-group col-lg-3">
    <label for="pedido">Pedido:</label>
    <input class="form-control" name="pedido" type="text" id="pedido">
</div>
<div class="form-group col-lg-3">
    <label for="email">Email:</label>
    <input class="form-control" name="email" type="text" id="email">
</div>
<div class="form-group col-lg-1">
    <input class="btn btn-primary form-control" type="submit" value="Filtrar">
</div>
</form>

当我添加height: 60px - 其他输入的高度 - 我获得与它们相同的内容高度。但无法找到一种在底部对齐的方法。

Answer 1

您只需使用top: 18px;应用于按钮<div>上的课程或按钮本身。

另一种选择是利用Bootstrap 4和它的row-eq-height类作为对齐元素的助手。 PEN HERE

Answer 2

如果您尝试内联这些字段，这应该有效。您可以使用占位符代替标签来节省空间。

https://jsfiddle.net/1mrhrzLn/1/

<form method="POST" action="example.com" accept-charset="UTF-8">
<div class="form-group col-lg-3">
    <input class="form-control" placeholder="Pedido" name="pedido" type="text" id="pedido">
</div>
<div class="form-group col-lg-3">
    <input class="form-control" placeholder="Email" name="email" type="text" id="email">
</div>
<div class="form-group col-lg-1">
    <input class="btn btn-primary form-control" type="submit" value="Filtrar">
</div>
</form>

div.form-group {
  margin: 0px auto;
}

div.form-group .form-control {
  display: inline-block;
  width: 30%;
  float: left;
  margin: 0px 1%;
}

将按钮与输入对齐（带引导程序）

2 个答案: