如何将第二行的第二列与Bootstrap中的第一列或第一行对齐？

Question

如何对齐Text1标签相同的位置Text3标签如下： http://www.bootply.com/R2CkWnzZQq#。实际上，我不喜欢使用自定义CSS来调整Text3标签。以下是html代码：

<br class="clearfix"> 
<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <span class="panel-text-title">Header</span> 
    </div> 
    <div class="panel-body"> 
     <h2>Info</h2> 
     <hr> 
<div class="form-horizontal"> 
      <div class="col-sm-6"> 
       <div class="form-group"> 
        <label for="name" class="col-sm-3 control-label">Text1</label> 
        <div class="col-sm-9"> 
         <input class="form-control" id="Text" name="Text" value="" type="text"> 
        </div> 
       </div> 

      </div> 
      <div class="col-sm-6"> 
       <div class="form-group"> 
        <label class="col-sm-3 control-label">Text2</label> 
        <div class="col-sm-9"> 
         <input class="form-control" id="Text" name="Text" value="" type="text"> 
        </div> 
       </div> 

      </div> 
      <br class="clearfix"> 
      <div class="col-sm-12"> 
       <div class="form-group"> 
        <label for="Report" class="col-sm-2 control-label">Text3</label> 
        <div class="col-sm-10"> 
         <textarea class="form-control" cols="20" id="Demo" name="Demo" placeholder="Text" rows="3" style="min-width:100%;"></textarea> 
        </div> 
       </div> 

      </div> 
      <div class="col-sm-12"> 
       <div class="form-group"> 
        <label for="Description" class="col-sm-1 control-label"></label> 
        <div class="col-sm-11"> 
         <button type="submit" class="btn btn-primary">Button</button> 
        </div> 
       </div> 
      </div> 
</div> </div> 
</div> 

在此先感谢。

Answer 1

与以下

<br class="clearfix"> 
<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <span class="panel-text-title">Header</span> 
    </div> 
    <div class="panel-body"> 
     <h2>Info</h2> 
     <hr>  
     <div class="row"> 
      <label for="name" class="col-sm-1 control-label text-right">Text1</label> 
      <div class="col-sm-5"> 
       <input class="form-control" id="Text" name="Text" value="" type="text"> 
      </div> 
      <label for="name" class="col-sm-1 control-label text-right">Text1</label> 
      <div class="col-sm-5"> 
       <input class="form-control" id="Text" name="Text" value="" type="text"> 
      </div> 
     </div> 
     <br class="clearfix"> 

     <div class="row"> 
     <label for="name" class="col-sm-1 control-label text-right">Text3</label> 
      <div class="col-sm-11"> 
       <textarea class="form-control" cols="20" id="Demo" name="Demo" placeholder="Text" rows="3" style="min-width:100%;"></textarea> 
      </div> 
     </div> 
     <br class="clearfix"> 

     <div class="row"> 
      <div for="name" class="col-sm-1"></div> 
      <div class="col-sm-11"> 
       <button type="submit" class="btn btn-primary">Button</button> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 2

更改以下代码。我已经在您分享的链接上进行了测试，并且工作正常。干杯! :-)

<br class="clearfix"> 
     <div class="col-sm-6"> 
      <div class="form-group"> 
       <label for="Report" class="col-sm-3 control-label">Text3</label> 
       <div class="col-sm-9"> 
        <textarea class="form-control" cols="20" id="Demo" name="Demo" placeholder="Text" rows="3" style="min-width:100%;"></textarea> 
       </div> 
      </div> 

     </div> 

我做了这里很简单，我已经改变了col-sm-12到col-sm-6跟随顶级品牌，col-sm-2 control-label至col-sm-3 control-label，并col-sm-10到col-sm-9

编辑1的textarea的DIV：与格的cols摆弄周围工作

<div class="panel panel-default"> 
<div class="panel-body"> 
    <h2>Info</h2> 
    <hr> 
<div class="form-horizontal"> 

      <div class="col-sm-4"> 
      <div class="form-group"> 
       <label for="name" class="col-sm-3 control-label">Text1</label> 
       <div class="col-sm-9"> 
        <input class="form-control" id="Text" name="Text" type="text" value=""> 
       </div> 
      </div> 
     </div> 

     <div class="col-sm-8"> 
      <div class="form-group"> 
       <label class="col-sm-6 control-label">Text2</label> 
       <div class="col-sm-6"> 
        <input class="form-control" id="Text" name="Text" type="text" value=""> 
       </div> 
      </div>    
     </div> 

     <br class="clearfix"> 
     <div class="col-sm-12"> 
      <div class="form-group"> 
       <label for="Report" class="col-sm-1 control-label">Text3</label> 
       <div class="col-sm-11"> 
        <textarea class="form-control" cols="20" id="Demo" name="Demo" placeholder="Text" rows="3"></textarea> 
       </div> 
      </div>    
     </div> 

     <div class="col-sm-12"> 
      <div class="form-group"> 
       <label for="Description" class="col-sm-1 control-label"></label> 
       <div class="col-sm-11"> 
        <button type="submit" class="btn btn-primary">Button</button> 
       </div> 
      </div> 
     </div>