引导对齐水平

Question

我怎么都对准水平线以下代码呈现为显示在屏幕1和，但我想有如图屏幕2

<div class="row"> 
     <div class="col-xs-6"> 
      <div class="row"> 
       <div class="col-xs-3"> 
           <label for="inputEmail3" class="col-sm-4 control-label">Number</label> 
       </div> 
       <div class="col-xs-3"> 
          <input type="text" id="number"></input> 
       </div> 
       <div class="col-xs-3"> 

       </div> 

      </div> 
    </div> 
    <div class="col-xs-6"> 
      <div class="row"> 
       <div class="col-xs-3"> 
           <label for="inputEmail3" class="col-sm-4 control-label">Tag</label> 
       </div> 
       <div class="col-xs-3"> 
          <input type="text" id="Name"></input> 
       </div> 
       <div class="col-xs-3"> 
          <button class="btn btn-default" type="button">Go!</button> 
       </div> 

      </div> 
    </div> 

屏幕截图1：

屏幕截图2：

Answer 1

你的HTML结构是不正确;您无需任何理由嵌套列和行，然后嵌入列中的列。 Docs

查看示例。

（*列是XS作为在这种情况下将无法通过移动屏幕呈现很好的例子，可以考虑使用SM）

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <form class="myForm"> 
 
     <div class="form-group"> 
 
     <label for="Number" class="col-xs-2 control-label">Number</label> 
 
     <div class="col-xs-4"> 
 
      <input type="text" class="form-control" id="Number" /> 
 
     </div> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="tag" class="col-xs-2 control-label">Tag</label> 
 
     <div class="col-xs-4"> 
 
      <div class="input-group"> 
 
      <input type="email" class="form-control" id="tag" /> <span class="input-group-btn"> 
 
     <button class="btn btn-default" type="button">Go!</button> 
 
     </span> 
 

 
      </div> 
 
     </div> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</div>