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