同じ行に検索とフィルタのドロップダウンを保ちます

Question

私は、ブートストラップを使用してウェブページ上のセクションに取り組んでいますが、同じ行にフィルタを置くことはできません。 Iveはいくつかの方法を試しましたが、現在は列を試していて、divsをインラインで試しましたが、まだ正しく整列していません。

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>

Answer 1

私はCOL-LG-10とCOL-LG-2上パディングがあるので、それはだと信じています。これをあなたのCSSに追加して、あなたのドロップを次の行にプッシュしているパディングを削除してください。

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

Answer 2

ブートストラップのドキュメントに続いて、lg（より大きなデスクトップ用）を使用してください。

また、液体容器に行をラップしてみてください。

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

    </div> 
    </div>