我想在同一行中放置一个输入字段和一个按钮。我想为按钮设置固定大小,并且我希望表单填充可用空间。我试图创建自己的解决方案,但不幸的是按钮低于输入字段。我该如何解决这个问题?
CSS:
.input-bar {
display: table;
width: 100%;
}
.input-bar-item {
display: table-cell;
}
.input-bar-item > button {
margin-left: 5px;
}
.width100 {
width: 100%;
}
HTML:
<div class="input-bar">
<div class="input-bar-item width100">
<form>
<div class="form-group">
<input class="form-control width100">
</div>
</form>
</div>
<div class="input-bar-item">
<button class="btn btn-info">MyButton</button>
</div>
</div>
最佳答案
您可以做几件事。一种是使用内联表单,另一种是使用输入组和 input-group-btn
。这是一个 plunkr:https://plnkr.co/edit/BNPRY0NL1G1fP7s24mFM?p=preview
我的偏好是input-group-btn
<div class="input-group">
<input class="form-control width100">
<span class="input-group-btn">
<button class="btn btn-info">MyButton</button>
</span>
</div>
关于html - 输入和按钮与 Bootstrap 在同一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37815260/