在同一行上保留搜索和过滤器下拉菜单

问题描述：

我正在使用引导程序，但无法将过滤器保持在同一行上，正在网页上的某个部分上工作。我尝试了几种方法，目前正在尝试使用列，尝试内联div，仍然没有正确排队。在同一行上保留搜索和过滤器下拉菜单

div class="col-lg-12"> 
 
    <div class="row"> 
 
    \t <div class="col-lg-10"> 
 
\t \t <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> 
 
\t </div> 
 
\t <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){ 
 
     \t echo '<li><a href="'.$groupSearch.'&amp;filter_customer_group_id='.$group['order_id'].'">'.$group['name'].'</a></li>'; 
 
     } 
 
     ?> 
 
     </ul> 
 
    </div> 
 
\t </div> 
 
</div>

答

我相信这是因为在填充的COL-LG-10和COL-LG-2。将此添加到您的CSS删除填充将推下到下一行。

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

答

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

也尝试包装你的行在流体容器。

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

    </div> 
    </div>

在同一行上保留搜索和过滤器下拉菜单

相关推荐