Как выровнять второй столбец второй строки с тем же первым столбцом или первой строкой в ​​Bootstrap?

Question

Как можно выровнять Текст1 обозначение того же положения Текст3 ярлык как показано ниже: 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 и текстовой DIV из col-sm-10 в col-sm-9

EDIT 1: пустячный вокруг с Div перевалы работает

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