Question

我正在使用bootstrap 3 我有一个包含搜索表单的div。我想以这种方式对齐选择框，如附图中所示。我还需要（价格滑块）或价格滑块空间

   <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的div中添加类form-group，然后在搜索按钮中将按钮放在类col-md-6的单独div中，并替换类{{1与btn-sm。

btn-block

Bootstrap 3表单元素对齐

1 个答案: