mobileview中的引导页脚搜索栏变小

Question

如何让我的引导搜索栏页脚在我的移动视图中成行展开。在我的桌面视图中看起来不错，但是当我进入移动视图 355 x 753 像素视图时，页脚搜索栏变小了。我在下面提供了一个屏幕截图：

我想让我的引导页脚搜索栏在移动视图中的页脚右行占据一些空间。

这是我的代码：

<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代码（最大宽度480px）：

.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

将第二个 div 类更改为全宽 col-xs-12，如果 dis 不起作用，将 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>