Bootstrap对齐水平

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>