如何將第二行的第二列與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>