将 Button 移动到与 Checkbox 和 Textbox 在同一行 Bootstrap

Question

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

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

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

<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。

非常感谢。

Answer 1

您可以将 <button> 包裹在 <span class="input-group-btn"> 中， update：我添加了一个包装器 <div class="form-group row"> 来包含表单元素也使用 .col-xs-8 class 来控制大小，我真的建议使用标准 classes 并由 bootstrap 提供，这是一个工作片段：

.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>

Answer 2

如果您不使用 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 class

将 Button 移动到与 Checkbox 和 Textbox 在同一行 Bootstrap

Move Button to be in the same line with Checkbox and Textbox Bootstrap

html

css

twitter-bootstrap

twitter-bootstrap-3