html - 将按钮与输入对齐(使用 Bootstrap )

标签 html css twitter-bootstrap

我有一个带有 Bootstrap 类 col-lg-x 的表单,用于构建两个内联输入和一个过滤器按钮。

我无法将按钮与任何加入表单组/表单控制 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 - 其他输入的高度 - 我得到与它们相同的内容高度。但是找不到在底部对齐的方法。

最佳答案

您可以简单地使用 top: 18px;应用于按钮的类 <div>或按钮本身。

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

关于html - 将按钮与输入对齐(使用 Bootstrap ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39665595/

相关文章:

javascript - 如何在 JS(类似 Bootstrap)中构建纯文本淡入/淡出轮播?

css - 媒体查询逻辑(优先级)

javascript - CSS3 动画滚动不工作

因潜在扩展而过期的 Javascript 警报

html - 如何为字体中不支持的字符添加后备字体?

css - 边框长度 - 我需要从上到下

css - 使用 Bootstrap 在 ng-show 之后移动 Div

css - Bootstrap 3 - 两列 - div 垂直对齐

javascript - PHP Ajax 调用以清除并填充下拉菜单

javascript - 从哪里开始智能手机 Web 开发?