通過在文本輸入框 <input> 前面、后面或是兩邊加上文字或按鈕，可以實(shí)現(xiàn)對(duì)表單控件的擴(kuò)展。為 .input-group 賦予 .input-group-addon 類，可以給 .form-control 的前面或后面添加額外的元素。

只支持文本輸入框 <input>

這里請(qǐng)避免使用 <select> 元素，因?yàn)?WebKit 瀏覽器不能完全繪制它的樣式。

避免使用 <textarea> 元素，由于它們的 rows 屬性在某些情況下不被支持。

輸入框組中的工具提示和彈出框需要特別的設(shè)置

為 .input-group 中所包含的元素應(yīng)用工具提示（tooltip）或popover（彈出框）時(shí)，必須設(shè)置 container: 'body' 參數(shù)，為的是避免意外的副作用（例如，工具提示或彈出框被激活后，可能會(huì)讓當(dāng)前元素變得更寬或/和變得失去其圓角）。

不要和其他組件混用

不要將表單組或柵格列（column）類直接和輸入框組混合使用。而是將輸入框組嵌套到表單組或柵格相關(guān)元素的內(nèi)部。

基本實(shí)例

在輸入框的任意一側(cè)添加額外元素或按鈕。你還可以在輸入框的兩側(cè)同時(shí)添加額外元素。

我們不支持在輸入框的單獨(dú)一側(cè)添加多個(gè)額外元素。

我們不支持在單個(gè)輸入框組中添加多個(gè)表單控件。

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

尺寸

為 .input-group 添加相應(yīng)的尺寸類，其內(nèi)部包含的元素將自動(dòng)調(diào)整自身的尺寸。不需要為輸入框組中的每個(gè)元素重復(fù)地添加控制尺寸的類。

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

作為額外元素的多選框和單選框

可以將多選框或單選框作為額外元素添加到輸入框組中。

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

作為額外元素的按鈕

為輸入框組添加按鈕需要額外添加一層嵌套，不是 .input-group-addon，而是添加 .input-group-btn 來包裹按鈕元素。由于不同瀏覽器的默認(rèn)樣式無法被統(tǒng)一的重新賦值，所以才需要這樣做。

<div class="row">
  <div class="col-lg-6">
    <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" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

作為額外元素的按鈕式下拉菜單

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

作為額外元素的分裂式按鈕下拉菜單

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>