css - bootstrap 水平对齐输入组

我有以下形式，并希望输入组水平对齐。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
  <h2>Bootstrap Mixed Form</h2>
  <form role="form" class="form-horizontal">
      <div class="form-group">
      <div class="col-sm-2">
		<div class="input-group">
      	<div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Frau <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Herr</a></li>
          <li><a href="#">Frau</a></li>
        </ul>
     	 </div><!-- /btn-group -->
          <label>Name</label><input type="text" class="form-control">
   		 </div><!-- /input-group -->
		 </div>


      <div class="col-sm-2"><label>Tel.</label><input class="form-control" placeholder="Tel." type="text"></div>
      <div class="col-sm-2"><label>E-mail</label><input class="form-control" placeholder="E-mail" type="text"></div>
    </div>
<br><br><br>

    <div class="form-group">
      <div class="col-sm-6">
        <button type="submit" class="btn btn-info pull-right">Submit</button>
      </div>
    </div>
  </form>
  <hr>
</div>

感谢您的帮助。

最佳答案

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="container">
  <h2>Bootstrap Mixed Form</h2>
  <form role="form" class="form-horizontal">
      <div class="form-group">
      <div class="col-sm-2">
		<label>Name</label>
          <div class="input-group">
      	<div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Frau <span class="caret"></span></button>
          <ul class="dropdown-menu" role="menu">
          <li><a href="#">Herr</a></li>
          <li><a href="#">Frau</a></li>
        </ul>

            </div><!-- /btn-group -->
            <input type="text" class="form-control"/>


   		 </div><!-- /input-group -->

		 </div>


      <div class="col-sm-2"><label>Tel.</label><input class="form-control" placeholder="Tel." type="text"></div>
      <div class="col-sm-2"><label>E-mail</label><input class="form-control" placeholder="E-mail" type="text"></div>
    </div>
<br><br><br>

    <div class="form-group">
      <div class="col-sm-6">
        <button type="submit" class="btn btn-info pull-right">Submit</button>
      </div>
    </div>
  </form>
  <hr>
</div>