如何在bootstrap v4中对齐输入和按钮样式链接？

Question

我使用网格系统

创建了一个表单

我有一个链接（样式为按钮），我希望它与输入对齐

我尝试了align-button和align-items-button的每个组合，但没有成功

这里是jsfiddle

<div class="form-row">
    <div class="form-group col-md-3">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control">
    </div>
    <div class="form-group col-md-3">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" >
    </div>
    <div class="form-group col-md-3">
      <a href="#" class="btn btn-sm btn-secondary">Test</a>
    <div class="form-group col-md-3">
</div>

在这里我是多么喜欢

Answer 1

如果您使用bootstrap4，则应使用 bootstrap flex utilities ...

将d-flex align-items-end课程添加到最后一列，使button与input

对齐

<强> Updated Fiddle

Answer 2

.block {
  display: block;
}

.inline {
  display: inline;
}

.btn-secondary {
  background: #666;
  color: white
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-row">
    <div class="form-group col-md-3 col-xs-3">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-3 col-xs-3">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
    <div class="form-group col-md-3 col-xs-3">
    <label class='block' >&nbsp;</label>
      <a href="#" class="btn btn-sm btn-secondary inline">Test</a>
    
  </div>
  

Answer 3

 <div class="form-row">
    <div class="form-group col-md-3">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control">
    </div>
    <div class="form-group col-md-3">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" >
    </div>
    <div class="form-group col-md-3">
    <label for="testBtn">&nbsp;</label>
      <a href="#" class="btn btn-secondary form-control" id="testBtn">Test</a>
    <div class="form-group col-md-3">
</div>
</div>

试试这个，它对我有用

Answer 4

在你的最后一个div（你有按钮的地方）添加为第一个孩子：

<label style="display: block">&nbsp;</label>

我还建议删除btn-sm class