使用Bootstrap将输入框和按钮放在同一行

Question

我想在同一行放置一个输入框和一个按钮。我希望设置按钮的固定大小，并使表单填充可用空间。我已经尝试创建自己的解决方案，但不幸的是，按钮比输入框低。如何解决这个问题？

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

- user1552545

---

这可能会帮助Bootstrap 按钮插件。 - vanburen

请参考Bootstrap 4：https://stackoverflow.com/a/53522299/171456 - Carol Skelly

Answer 1

有几件事情可以做。一种是使用内联表单，另一种是使用输入组和 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>

- Joseph Evans

---

这应该被标记为正确的。这是迄今为止最简单的解决方案，也是引导程序的做法。 - Out of Orbit

@OutofOrbit 当你看到一个好的答案时，一定要给第一个发布它的人点赞。 - Emad

@OutofOrbit明确告诉user1552545将其标记为正确。 - Pathros

Answer 2

这是您的答案： 左侧的组。

<div class="input-group">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">Go!</button>
  </span>
  <input type="text" class="form-control">
</div>

右侧的群组：

<div class="input-group">
   <input type="text" class="form-control">
   <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
   </span>
</div>

- SESN

Answer 3

您可以使用Bootstrap提供的"form-inline" 类。

<form class="form-inline">
    <input type="text" class="form-control">
    <input type="submit" value="button" class="btn btn-primary">
</form>

- AfikDeri

Answer 4

你想要这样的东西。

<div class="input-group">
   <input type="text" class="form-control" >
     <span class="input-group-btn">
       <button class="btn btn-primary" type="button">Submit</button>
     </span>
</div>

- Jamie Eltringham

Answer 5

根据http://getbootstrap.com/components/#input-groups上的文档，您可以使用内置的Bootstrap CSS来实现此操作：

<div class="input-group">
    <input type="text" class="form-control" placeholder="Your text field..."> <-- Text field
    <div class="input-group-btn">
        <button type="button" class="btn btn-default">Your button</button> <-- Inline button
    </div>
</div>

Hope I can help!

- Spencer B.