Html 除了几个垂直对齐的输入元素外，还要对齐文本区域

如下图所示，除了垂直对齐的几个输入元素之外，我还想对齐一个文本区域。我使用引导网格来实现所需的效果。 目前，当我使用“form horizontal”时，所有项目都堆积在一列中，因此，文本区域位于电话输入元素下

我希望它是有反应的。如果我在文本区域使用margin属性，那么输入会相互重叠，从而使UI看起来很混乱。如果我能得到你的帮助就太好了

所需布局：

当前布局：

您可以通过以下方式完成此操作。创建两列（相当于12列），然后将另一个

行

与包含表单输入的列一起放在每个列中。我想您希望输入使用整个可用空间，因此将嵌套列设置为

col-*-12

，以便它们使用整个父列宽度

工作示例：全页打开

表单{
背景#f2f2；
填充：20px 20px 5px；
}

---

非常感谢，@vanburen。它真的帮助我得到了我想要的。此外，我还可以解决网格嵌套的几个其他问题。Stackoverflow是给人类的一份绝妙礼物。：）

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