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

时间:2018-03-07 13:07:13

标签: css twitter-bootstrap bootstrap-4

我使用网格系统

创建了一个表单

我有一个链接(样式为按钮),我希望它与输入对齐

我尝试了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>

在这里我是多么喜欢enter image description here

4 个答案:

答案 0 :(得分:1)

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

d-flex align-items-end课程添加到最后一列,使buttoninput

对齐

<强> Updated Fiddle

答案 1 :(得分:0)

.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>
  

答案 2 :(得分:0)

 <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>

试试这个,它对我有用

答案 3 :(得分:0)

在你的最后一个div(你有按钮的地方)添加为第一个孩子:

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

我还建议删除btn-sm class