Bootstrap 3 формы

Question

Как создать небольшую форму для Bootstrap 3?

Пример 1:

<div class="well"> 

    <div class="form-group row"> 
     <div class="col-lg-2"> 
      <label for="city" class="control-label">City</label> 
      <input type="text" class="form-control" id="city"/> 
     </div> 
    </div> 

    <label for="price" class="control-label">Price</label> 
    <div class="form-group row" id="price"> 
     <div class="col-lg-1"> 
      <input type="text" class="form-control" /> 
     </div> 
     <div class="col-lg-1"> 
      <input type="text" class="form-control"/> 
     </div> 
    </div> 

</div> 

Это работа. Но если я добавлю <div class="col-lg-3">, то неправильно отобразит форму.

Пример 2:

<div class="col-lg-3"> 
    <div class="well"> 

    <div class="form-group row"> 
     <div class="col-lg-2"> 
      <label for="city" class="control-label">City</label> 
      <input type="text" class="form-control" id="city"/> 
     </div> 
    </div> 

    <label for="price" class="control-label">Price</label> 
    <div class="form-group row" id="price"> 
     <div class="col-lg-1"> 
      <input type="text" class="form-control" /> 
     </div> 
     <div class="col-lg-1"> 
      <input type="text" class="form-control"/> 
     </div> 
    </div> 

    </div> 
</div> 

Что я делаю неправильно?

Answer 1

Обзор следующие коды:

<div class="col-lg-3"> 
    <div class="well"> 
     <div class="form-group row"> 
      <label for="city" class="col-lg-2 control-label">City</label> 
      <div class="col-lg-10"> 
       <input type="text" class="form-control" id="city" /> 
      </div> 
     </div> 

     <div class="form-group row" id="price"> 
      <label for="price" class="col-lg-2 control-label">Price</label> 
      <div class="col-lg-5"> 
       <input type="text" class="form-control" /> 
      </div> 
      <div class="col-lg-5"> 
       <input type="text" class="form-control"/> 
      </div> 
     </div> 
    </div> 
</div>