Выравнивание HTML управления

Question

Предположим, что у меня есть следующий HTML:

<div class="column col-sm-2 col-xs-2 col-md-3"> 


     <div class="row" style="margin-left: 10px;"> 
      <p><b>Test:</b> 
       <select> 
        <option>test1</option> 
        <option>test2</option> 
        <option>test3</option> 

       </select> 
      </p> 
     </div> 
     <div class="row" style="margin-left: 10px;"> 
      <p><b>LongLineTest:</b> 
       <select> 
        <option>test1</option> 
        <option>test2</option> 
        <option>test3</option> 
       </select> 

      </p> 
     </div> 
    </div> 

Он производит Somthing как:

Test:select control 

    LongLineTest:select control 

Но мне нужно следующее выравнивание:

 Test:select control 

LongLineTest:select control 

Как я могу сделать это? Также я использую фреймворк bootstrap. Адрес fiddle.

Заранее спасибо.

Answer 1

Bootstrap имеет встроенные классы для этого ...

<div class="column col-sm-12"> 

    <div class="form-horizontal"> 

    <div class="form-group"> 
     <label class="col-sm-3 control-label">Test</label> 
     <div class="col-sm-9"> 
     <select class="form-control"> 
      <option>test1</option> 
      <option>test2</option> 
      <option>test3</option> 
     </select> 
     </div> 
    </div> 

    <div class="form-group"> 
     <label class="col-sm-3 control-label">LongLineTest</label> 
     <div class="col-sm-9"> 
     <select class="form-control"> 
      <option>test1</option> 
      <option>test2</option> 
      <option>test3</option> 
     </select> 
     </div> 
    </div> 

    </div> <!-- form-horizontal --> 

</div> 

DEMO

DOCUMENTATION

Answer 2

Просто обернуть содержимое в другой DIV и добавить text-align:right;Fiddle

Answer 3

<div class="row" style="margin:10px 0px 10px 75px;"> 

настроить соответствующим образом. Наслаждайтесь дружище