我有以下代码,用于垂直对齐我的 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;
}
出于某种原因,它仍然无法正常工作。随附的屏幕截图显示了正在发生的事情(似乎垂直对齐方式是......默认情况下位于顶部?我需要按钮位于行的底部以正确对齐它旁边的输入字段。
知道可能是什么问题吗?我有点傻眼了,我在这里看了几个类似的问题,但无济于事。 :(
最佳答案
试试这个。
<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
关于html - 如何垂直对齐 Bootstrap 3 列中的表单元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25218777/