将按钮移动到与复选框和文本框引导程序在同一行答案

【问题标题】：Move Button to be in the same line with Checkbox and Textbox Bootstrap将按钮移动到与复选框和文本框引导程序在同一行
【发布时间】：2026-01-18 14:40:01
【问题描述】：

我正在尝试将按钮移动到与复选框和文本框位于同一行的位置。目前它显示的元素如下所示...

我想要的是下面显示的东西......

此外，复选框旁边的文本框会填满其所在行的整个空间。我怎样才能让它更短？

<div class="input-group">
    <span class="input-group-addon">
    <input type="checkbox"> Break After
    </span>
    <input type="text" class="form-control">
</div>

<button id="btnextra" type="button" class="btn btn-default btn-md">Extra</button>

我有我的 jsfiddle here。

非常感谢。

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

如果你不使用button@ROOT 的建议，你可以这样做：

.input-group {
  width: 50%;
  float: left;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="input-group">
  <span class="input-group-addon">
                <input type="checkbox"> Break After
                </span>
  <input type="text" class="form-control">
</div>

<button id="btnextra" type="button" class="btn btn-default btn-md">Extra</button>

为input-group添加css类

【讨论】：

感谢您的回答。如何在将所有元素保持在中心的同时使文本框更小？当我将你的 CSS 宽度设置为 50% 时，它会缩短文本框，但它们之间仍然有很大的差距。谢谢。
如果我运行我的代码，'Gap' 不存在，你能编辑你的代码并发布所有代码与该结果吗？
我已经在 JSfiddle 中测试了你的代码，它没有空白，但是将它复制粘贴到我的项目中，它留下了空白。诡异的。我的项目已经包含了数千行代码，我还应该发布吗？我只是复制粘贴了您的代码，但它在我的项目中运行方式不同。
嗯，你能看看我的 sn-p 和你的完整代码的 css 属性是否不同吗？
在我的完整代码中，我没有自己的 CSS。所有使用的 CSS 都是由引导程序使用的，我只使用默认的。

【解决方案2】：

您可以将<button> 包裹在<span class="input-group-btn"> 中，更新：我添加了一个包装器<div class="form-group row"> 来包含表单元素，还使用.col-xs-8 类来控制大小，我真的建议使用标准类并由引导程序提供，这里是一个有效的sn- p：

.btnextra {
  margin-left: 10px;
}

.form-group-centered {
  width: 400px;
  margin: 0 auto;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<br />
<div class="form-group row">
  <div class="col-xs-12">
    <div class="form-group-centered">
      <div class="input-group pull-left" style="
      width: 300px;
  ">
          <span class="input-group-addon"> <input type="checkbox"> Break After </span>
          <input type="text" class="form-control">

      </div>
      <button id="btnextra" type="button" class="btn btn-default btn-md btnextra pull-left" style="
  ">Extra</button>
    </div>
  </div>
</div>

【讨论】：

感谢您的回答。如何分离文本框和按钮？此外，文本框仍会填满整个剩余空间。如何在保持所有元素居中的同时使其更小？
很高兴为您提供帮助，让我检查一下。
imgur.com/a/ti3Cxrm 元素不居中 :( 我如何居中？
@chris_techno25，我修好了，注意我添加的.form-group-centered CSS 类。