Bootstrap 3按钮和输入分组在一行

Question

我有一堆按钮和一个输入文本框.但是如图所示,它们没有正确对齐.

    <div class="col-md-12 pull-right">
        <div class="pull-right">
            <button type="button" class="btn btn-default btn-xs"> << </button>
            <button type="button" class="btn btn-default btn-xs"> < </button>
            <button type="button" class="btn btn-default btn-xs"> > </button>
            <button type="button" class="btn btn-default btn-xs"> >> </button>
            <input type="number" style="width: 30px; " class="form-control input-number" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" />

        </div>
</div>

有没有办法将它们排成一排？另请注意,输入框的大小与其他大小不同.有没有办法解决这个问题？

Answer 1

您需要一个输入组。您可以在输入的任一侧添加按钮组。他们将在左边：

<div class="input-group">
    <div class="input-group-btn">
        <button type="button" class="btn btn-default"> << </button>
        <button type="button" class="btn btn-default"> < </button>
        <button type="button" class="btn btn-default"> > </button>
        <button type="button" class="btn btn-default"> >> </button>
    </div>

    <input type="number" style="width: 30px; " class="form-control input-number" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" />
</div>

在这里阅读更多相关信息： http://getbootstrap.com/components/#input-groups-buttons-multiple

Answer 2

使用btn-group排列连续的所有按钮.像这样

<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
<div class="btn-group">
  <button type="button" class="btn btn-default btn-xs">&lt;&lt;</button>
  <button type="button" class="btn btn-default btn-xs">&lt;</button>
  <button type="button" class="btn btn-default btn-xs">&gt;</button>
  <button type="button" class="btn btn-default btn-xs">&gt;&gt;</button>
  <input type="number" style="width: 30px; margin-top:10px" class="form-control input-number input-xs" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" />
</div>

注意:当使用HTML符号(例如<,>)作为文本时,请像我一样对它们进行编码(这是一个很好的做法).

Docs btn-groups

我使用内联样式作为输入类型号,margin-top:10px;因为input[type=number]在bootstrap中有margin-bottom:10px;这样,以平衡使用的margin-top.相反,你可以使用margin-bottom:0px

正如@Mike Robinson所说,即便.input-append如此.差异是圆形边框,并从版本3input-append转换input-group

<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
<div class="input-append">
  <button type="button" class="btn btn-default btn-xs">&lt;&lt;</button>
  <button type="button" class="btn btn-default btn-xs">&lt;</button>
  <button type="button" class="btn btn-default btn-xs">&gt;</button>
  <button type="button" class="btn btn-default btn-xs">&gt;&gt;</button>
  <input type="number" style="width: 30px; " class="form-control input-number input-xs" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" />
</div>