Question

我在网页上的一个部分工作，使用bootstrap，但不能在相同的行上保持过滤器。我尝试了几种方法，目前尝试使用列，尝试内联div，仍然没有正确排列。

div class="col-lg-12">
  <div class="row">
  	<div class="col-lg-10">
		  <div class="rev-search" style="overflow: hidden; padding-right:.5em;" >
        <input type="text" style="width: 80%;" id="rev-search" placeholder="Search" autofocus="" />
        <span><i class="fa fa-search"></i></span>
     </div>
	  </div>
	 <div class="col-lg-2">
     <div class="dropdown pull-right">
       <button class="btn btn-default dropdown-toggle" style="float: right;" type="button" id="group_filter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><?php echo $text_filter_group;?><span class="caret"></span></button>
       <ul class="dropdown-menu" aria-labelledby="group_filter">
       <?php
        foreach ($customer_groups as $group){
        	echo '<li><a href="'.$groupSearch.'&amp;filter_customer_group_id='.$group['order_id'].'">'.$group['name'].'</a></li>';
        }
        ?>
      </ul>
    </div>
	</div>
</div>

Answer 1

我相信这是因为col-lg-10和col-lg-2上有填充物。将其添加到您的css中以删除将您的下拉推到下一行的填充。

.col-lg-10, .col-lg-2 {
  padding: 0;
}

Answer 2

按照Bootstrap文档，请使用lg（适用于较大的桌面）。

还可以尝试将行包裹在流体容器中。

<div class="container-fluid"> 
  <div class="row">

    </div>
  </div>

将搜索和过滤器下拉列表保持在同一行

2 个答案: