我使用网格系统
创建了一个表单我有一个链接(样式为按钮),我希望它与输入对齐
我尝试了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>
答案 0 :(得分:1)
如果您使用bootstrap4,则应使用 bootstrap flex utilities ...
将d-flex align-items-end
课程添加到最后一列,使button
与input
<强> 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' > </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"> </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"> </label>
我还建议删除btn-sm class