Boostrap布局 - 尝试在两列布局中对齐textarea

Question

我有2列布局，其中每列进一步分为每行2列。现在我正在尝试将文本区域字段从​​第1列（第2个子列）扩展到页面中的第2列（第4个子列），并且很难确定我应该使用哪些引导类。

我认为可以使用此图片更好地描述：

Codepen：https://codepen.io/anon/pen/xpPxZZ

.form-horizontal {
  padding-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<form class="form-horizontal" id="formTest">
  <div class="row">
    <div class="col-sm-6">
      <div class="form-group">
        <label for="lblFirstName" class="control-label col-xs-5">First Name</label>
        <div class="col-xs-7">
          <input type="textbox" class="form-control"></input>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="form-group">
        <label for="lblLastname" class="control-label col-xs-5">Last Name</label>
        <div class="col-xs-7">
          <input type="textbox" class="form-control"></input>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-6">
      <div class="form-group">
        <label for="lblComments" class="control-label col-xs-5">Comments</label>
        <div class="col-xs-7">
          <textarea type="textbox" id="Comments" class="form-control"></textarea>
        </div>
      </div>
    </div>
  </div>
</form>

由于

Answer 1

将col-sm-6更改为col-sm-12

BTW：输入标签没有结束标签，只是关闭。

<强>不正确： -Wall -Wextra

<强>正确： <input type="text"></input>

＆＃13;

＆＃13;

<input type="text" />

＆＃13;

.form-horizontal {
  padding-top: 20px;
}

＆＃13;

＆＃13;

＆＃13;