Bootstrap全宽搜索框

Nur*_*din 4 html css twitter-bootstrap

我尝试制作全宽搜索框.它在标签和移动设备上工作,但不能在台式机或笔记本电脑上工

这是我的代码

<div class="row">
<div class="col-md-offset-2 col-sm-offset-2 col-xs-offset-1 col-md-8 col-sm-8 col-xs-10">    
<form action="" autocomplete="off" class="navbar-form" method="post" accept-charset="utf-8">
        <div class="input-group">
            <input name="searchtext" value="" class="form-control" type="text">
            <span class="input-group-btn">
               <button class="btn btn-default" type="submit" id="addressSearch">
                   <span class="icon-search"></span>
               </button>
            </span>
        </div>
    </form>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)

当我看到响应式视图在移动和标签视图上工作时 在此输入图像描述

但它不适用于桌面视图 在此输入图像描述

Ubi*_*ers 11

删除nav-bar类并添加form-horizo​​ntal

<form action="" autocomplete="off" class="form-horizontal" method="post" accept-charset="utf-8">
        <div class="input-group">
            <input name="searchtext" value="" class="form-control" type="text">
            <span class="input-group-btn">
               <button class="btn btn-default" type="submit" id="addressSearch">
                   <span class="icon-search"></span>
               </button>
            </span>
        </div>
    </form>
Run Code Online (Sandbox Code Playgroud)