Question

我想将输入字段和Button放在同一行中。我想为按钮设置修复大小，并且我希望表单填充可用空间。我试图创建自己的解决方案，但遗憾的是按钮低于输入字段。我该如何解决这个问题？

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

Answer 1

你可以做几件事。一种是使用内联表单，另一种是使用输入组和input-group-btn。这是一个傻瓜：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>

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>

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>

Answer 4

你想要这样的东西

content

Answer 5

你应该覆盖一些引导类：

.input-bar {
    display: table;
    width: 100%;
}

.input-bar-item > button {
    margin-left: 5px;
}

.width100 {
  width: 100%;
}
.input-bar .form-group {
    float: left;
    vertical-align: middle;
    width: 90%;
}
.input-bar-item-btn {
  float: left;
  width:10%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="input-bar">
    <div class="input-bar-item">
      <form>
         <div class="form-group">
            <input class="form-control">
        </div>
      </form>
    </div>
    <div class="input-bar-item input-bar-item-btn">
      <button class="btn btn-info">MyButton</button>
    </div>
  </div>

Answer 6

根据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>

希望我能帮忙！

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

6 个答案: