移动按钮与复选框和文本框Bootstrap在同一行。

Question

我想把按钮移到与复选框和文本框在同一行的位置。目前它显示的元素如下图所示......

我想要的是如下图所示......。

另外，复选框旁边的文本框占满了整个行的空间。我怎样才能让它变短呢？

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

非常感谢你。

Answer 1

你可以直接将 <button> 在 <span class="input-group-btn">,更新: 我加了一个包装纸 <div class="form-group row"> 包含的表单元素也用于 .col-xs-8 类来控制大小，我真的建议使用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>

添加css类为 input-group