花式输入框

居中的普通输入框：

• 血的教训：<div class="col-md-6 col-md-offset-3 input-group">还有<span class="input-group-btn">不能没有。

  <div class="row" style="position:absolute;margin-left:10px;margin-right:10px;top:40%">
    <div class="col-md-6 col-md-offset-3 input-group">
        <input type="text" class="form-control" placeholder="Search for...">
        <span class="input-group-btn">
          <button class="btn btn-primary" type="button">搜搜</button>
        </span>
    </div>
  </div>

image.png

带下拉菜单的输入框：

<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>
      <input type="text" class="form-control" aria-label="...">
    </div>
  </div>
</div>

image.png