我有以下代码,用于垂直对齐我的Bootstrap表单部分中的按钮:
HTML :
<div class="form-group">
<div class="row">
<div class="col-md-9">
<label for="isbn">ISBN# (10 or 13)</label>
<input type="text" class="form-control" id="isbn" placeholder="0000000000" />
</div>
<div class="col-md-3">
<button class="btn btn-default form-isbn" type="button">Check ISBN</button>
</div>
</div>
</div>
CSS:
.form-isbn {
display: table-cell;
vertical-align: bottom;
float: none;
}
出于某种原因,它仍然无法正常工作。附带的屏幕截图显示了正在发生的事情(默认情况下,垂直对齐似乎是......顶部?我需要按钮位于行的底部,以便与其旁边的输入字段正确对齐。
知道问题可能是什么?我有点傻眼,我在这里看了几个类似的问题,但没有用。 :(
答案 0 :(得分:0)
试试这个。
<div class="form-group">
<div class="row">
<div class="col-md-12">
<label for="isbn">ISBN# (10 or 13)</label>
</div>
<div class="col-md-9">
<input type="text" class="form-control" id="isbn" placeholder="0000000000" />
</div>
<div class="col-md-3">
<button class="btn btn-default form-isbn" type="button">Check ISBN</button>
</div>
</div>
</div>
希望得到这个帮助。
*尝试禁用您为.form-isbn
制作的CSS答案 1 :(得分:0)
我最近遇到了这个问题,并希望实现相同的目标。使用纯引导类实现的一种方法是将输入和按钮推到单独的行,并删除第一行的底部边距以使标签像以前一样接近输入
<div class="form-group">
<div class="row">
<div class="col-md-9 mb-0">
<label for="isbn">ISBN# (10 or 13)</label>
</div>
</div>
<div class="row">
<div class="col-md-9">
<input type="text" class="form-control" id="isbn" placeholder="0000000000" />
</div>
<div class="col-md-3">
<button class="btn btn-default" type="button">Check ISBN</button>
</div>
</div>
</div>