モバイルビューのブートストラップフッタ検索バーが小さくなる

Question

モバイルビューでブートストラップの検索バーフッタを横に並べて表示するにはどうすればよいですか。私のデスクトップビューではうまく見えますが、モバイルビューで355 x 753ピクセルのフッタ検索バーが小さくなるのを見ると表示されます。私は、ブートストラップフッター検索バーは、モバイルビューで私のフッターの右の行にいくつかのスペースを取るようにしたい

：私は下にそれでスクリーンショットを提供します。 （最大幅480PX）で/メディアクエリーワット

<div class="col-xs-5 pull-left"> 
<div class="col-xs-7 input-group"> 
    <form role="search" method="get" action="<?php echo home_url('/'); ?>"> 
    <div class="input-group"> 
     <input type="search" class="form-control stylesearch" placeholder="Search" value="<?php echo get_search_query() ?>" name="s" title="Search" /><span class="input-group-btn"> <button class="btn btn-default"> <i class="fa fa-search fa-1x" aria-hidden="true"></i> </button> </span> 
    </div> 
    </form> 
</div> 
</div> 

CSSコード：

.col-xs-5 { 
    width:49.667% 
    margin-left:-10px; 
} 
.pull-left { 
    margin-bottom:0.9%; 
    margin-top:1.1%; 
} 
.btn-default { 
    background-color: #e1e1e1; 
    border-color: #e1e1e1; 
    color: #333; 
    max-width: 50px; 
} 

Answer 1

変更全幅col-xs-12への第二のdivクラス、DIS doesnのであればここで

は私のコードです仕事はdivのクラスをより大きな数に変更し、ソーシャルアイコンのクラスを12に変更します - 同じ行に最初に滞在する数の大きい方

<div class="col-xs-5 pull-left"> 
<div class="col-xs-12 col-lg-7 input-group"> 
    <form role="search" method="get" action="<?php echo home_url('/'); ?>"> 
    <div class="input-group"> 
     <input type="search" class="form-control stylesearch" placeholder="Search" value="<?php echo get_search_query() ?>" name="s" title="Search" /><span class="input-group-btn"> <button class="btn btn-default"> <i class="fa fa-search fa-1x" aria-hidden="true"></i> </button> </span> 
    </div> 
    </form> 
</div> 
</div>