除了几个垂直对齐的输入元素之外，还对齐textarea

Question

如下图所示，我想在垂直对齐的几个输入元素之外对齐文本区域。我正在使用bootstrap网格来实现所需的效果。 目前，当我使用＆＃34; form-horizo​​ntal＆＃34;时，所有项目都堆叠在一个列中，因此 textarea 位于手机输入元素下

我希望它能够做出回应。如果我在文本区域使用margin属性，那么输入会相互重叠，因此会使UI看起来很乱。如果我能得到你的帮助，那将是很棒的。

所需布局：

目前的布局：

<div class="container">
    <form class="form-horizontal" role="form">
      <div class="form-group">
         <div class="col-sm-10 col-md-2 col-lg-2 col-lg-offset-0">
          <input type="text" class="form-control" id="name" placeholder="NAME">
         </div>
      </div>
      <div class="form-group">
        <div class="col-sm-10 col-md-2 col-lg-2 col-lg-offset-0">
          <input type="email" class="form-control" id="email" placeholder="E-MAIL">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-10 col-md-2 col-lg-2 col-lg-offset-0"> 
          <input type="tel" class="form-control" id="tel" placeholder="PHONE">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-10 col-md-6 col-lg-6 col-lg-offset-0">
            <textarea class="form-control message" rows="6" id="comment" placeholder="MESSAGE"></textarea>
        </div>
      </div>          
    </form>
</div>

Answer 1

您可以nesting columns执行此操作。创建两列（相当于12列），然后在每个列中放入另一个row以及包含表单输入的列。我想您希望输入使用整个可用空间，因此将嵌套列设置为col-*-12，以便它们使用整个父列宽度。

工作示例： 在FullPage上打开

form {
  background: #f2f2f2;
  padding: 20px 20px 5px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form>
    <div class="row">

      <div class="col-sm-6">
        <div class="row">
          <div class="col-sm-12">
            <div class="form-group">
              <input type="text" class="form-control" id="name" placeholder="NAME">
            </div>
          </div>
          <div class="col-sm-12">
            <div class="form-group">
              <input type="email" class="form-control" id="email" placeholder="E-MAIL">
            </div>
          </div>
          <div class="col-sm-12">
            <div class="form-group">
              <input type="tel" class="form-control" id="tel" placeholder="PHONE">
            </div>
          </div>
        </div>
      </div>

      <div class="col-sm-6">
        <div class="row">
          <div class="col-sm-12">
            <div class="form-group">
              <textarea class="form-control message" rows="6" id="comment" placeholder="MESSAGE"></textarea>
            </div>
          </div>
        </div>
      </div>

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