Bootstrap 3 Элемент выравнивания формы

Question

Я использую bootstrap 3 У меня есть div, который содержит форму поиска. Я хочу, чтобы выровнять полей выбора в порядке, как показано на прилагаемой image.I также необходимо (Цена Slider) или пространства для ползунка цены

jsfiddle

<div class="row"> 

    <div class="col-md-6 col-sm-6"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"><h4>Slider</h4></div> 
      <div class="panel-body"> 

      <!------------------slider-----------------> 
      <div class="carousel slide" id="carousel-199165"> 
       <ol class="carousel-indicators"> 
        <li class="active" data-slide-to="0" data-target="#carousel-199165"> 
        </li> 
        <li data-slide-to="1" data-target="#carousel-199165"> 
        </li> 
        <li data-slide-to="2" data-target="#carousel-199165"> 
        </li> 
       </ol> 
       <div class="carousel-inner"> 
        <div class="item active"> 
         <img alt="" src="http://lorempixel.com/1600/500/sports/1" /> 

        </div> 
        <div class="item"> 
         <img alt="" src="http://lorempixel.com/1600/500/sports/2" /> 

        </div> 
        <div class="item"> 
         <img alt="" src="http://lorempixel.com/1600/500/sports/3" /> 

        </div> 
       </div> 
       <a class="left carousel-control" href="#carousel-199165" data-slide="prev"> 
       <span class="glyphicon glyphicon-chevron-left"></span></a> 
       <a class="right carousel-control" href="#carousel-199165" data-slide="next"> 
       <span class="glyphicon glyphicon-chevron-right"></span></a> 
      </div> 
      <!------------------slider-end----------------> 
      </div> 
     </div> 
    </div> 


    <div class="col-md-6 col-sm-6"> 

     <div class="well"> 
      <form class="form"> 
       <h4>Quick Search</h4> 
       <div class="form-group"> 
       <select class="form-control"> 
       <option>Propery</option> 
       <option>Ketchup</option> 
       <option>Relish</option> 
       </select> 
       </div> 
       <div class="form-group"> 
       <select class="form-control"> 
       <option>City</option> 
       <option>Ketchup</option> 
       <option>Relish</option> 
       </select> 
       </div> 
       <div class="form-group"> 
       <select class="form-control"> 
       <option>Area</option> 
       <option>Ketchup</option> 
       <option>Relish</option> 
       </select> 
       </div> 

       <span class="input-group-btn"><button class="btn btn-sm btn-primary" type="button">Search</button></span> 
      </form> 
      </div> 

    </div> 

    </div> 
</div> 

Answer 1

Код для поиска недвижимости: просто добавьте класс col-md-6 в раздел с классом form-group и для кнопки поиска поместите кнопку в отдельном div класса col-md-6 и заменить класс btn-sm на btn-block.

<div class="col-md-6 col-sm-6"> 
<div class="well"> 
    <form class="form"> 
     <h4>Quick Search</h4> 

     <div class="col-md-12"> 
      <p>Your Price Slider</p> 
     </div> 
     <div class="row"> 
      <div class="form-group col-md-6"> 
       <select class="form-control"> 
        <option>Propery</option> 
        <option>Ketchup</option> 
        <option>Relish</option> 
       </select> 
      </div> 
      <div class="form-group col-md-6"> 
       <select class="form-control"> 
        <option>City</option> 
        <option>Ketchup</option> 
        <option>Relish</option> 
       </select> 
      </div> 
      <div class="form-group col-md-6"> 
       <select class="form-control"> 
        <option>Area</option> 
        <option>Ketchup</option> 
        <option>Relish</option> 
       </select> 
      </div> 
      <div class="col-md-6"> 
       <button class="btn btn-block btn-primary" type="button">Search</button> 
      </div> 
     </div> 
    </form> 
</div>