Question

我有以下表格，希望输入组水平对齐。

<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>

感谢您的帮助。

Answer 1

＆＃13;

<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>

＆＃13;

Answer 2

好吧，假设你可以更改你的html，你可能不会同时包含同一父母下的第一个select和下一个input（加label）。

您可以为相同的类创建一个容器，为边距，响应等（col-sm-2）创建相同的类，为同一类下的label + input创建另一个容器。

然后只需在label之前添加select &nbsp即可使距离相同。

您有一个 FIDDLE

我删除了两个：

<div class="input-group">  
    <div class="input-group-btn"> 
    </div>
</div>

在你的例子中，它只是无用的容器乱七八糟。

Bootstrap水平对齐输入组

2 个答案: