输入和按钮与Bootstrap在同一行 [英] Input and button in same line with Bootstrap

问题描述

我想将输入字段和按钮放在同一行中。我想为按钮设置固定大小，并且我希望表格填充可用空间。我尝试创建自己的解决方案，但不幸的是，该按钮比输入字段低。我该如何解决？

I want to put an input field and a Button in the same line. I want to set fix size for the button, and and I want the form to fill the available space. I've tried to create my own solution, but unfortunately the button is lower than the input field. How can I fix this?

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>

https://plnkr.co/edit/5clqg067q4DiMHRkoPEY?p=preview

推荐答案

您可以做几件事。一种是使用内联表单，另一种是使用输入组和 input-group-btn 。这是一个插件： https://plnkr.co/edit/BNPRY0NL1G1fP7s24mFM?p=preview

There's a couple of things you can do. One is use inline forms, another is using input groups and an input-group-btn. Here is a 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>

这篇关于输入和按钮与Bootstrap在同一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！