Html 引导全宽度搜索框

Html 引导全宽度搜索框,html,css,twitter-bootstrap,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" acce

我试着做一个全宽的搜索框。它可以在标签和手机上工作,但不能在台式机或笔记本电脑上工作

这是我的密码

<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>

当我看到响应视图时,它在移动和选项卡视图上工作

但它在桌面视图中不起作用
将col-lg-12等级授予div

<form action="" autocomplete="off" class="navbar-form" method="post" accept-charset="utf-8">
<div class="input-group col-lg-12">
    <input name="searchtext" style="width:100%" 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 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>


包括您的CSS,以便我们可以帮助您将您的输入组放入@Arvaan中。我已将
@tenderloin中的完整代码放入我仅使用
bootstrap.min.CSS
。请查看更新代码@all请为您的答案提供解释。在运行后,将col-lg-12类放入您的行内,并放入您的行外,但是如果我在
输入组btn
中使用像
这样的标志符号,它将进入下一行。
<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>