如何在Bootstrap 3中添加带图标的搜索框到导航栏？
如何在Bootstrap 3中添加带图标的搜索框到导航栏？
提问于 2013-09-05 00:59:25
我正在使用新的Twitter Bootstrap 3，并试图在顶部导航栏中放置一个像这样的搜索框(如下所示)
在Bootstrap 2中，可以这样做：
<form class="form-search" method="get" id="s" action="/">
<div class="input-append">
<input type="text" class="input-medium search-query" name="s" placeholder="Search" value="">
<button type="submit" class="add-on"><i class="icon-search"></i></button>
</div>
</form>但我不确定如何在Bootstrap 3中生成相同的代码，因为已经发生了这么多变化。
Bootstrap 3中导航栏搜索框窗体的默认HTML为：
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>我如何修改它来实现我所需要的？
回答 6
Stack Overflow用户
回答已采纳
发布于 2013-09-05 01:33:05
我在一个开发站点上运行了BS3，下面的代码产生了你所要求的效果/布局。当然，您需要在BS3中设置字形图标。
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="/" title="Aahan Krish's Blog - Homepage">ITSMEEE</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="/topic/notes/">/notes</a></li>
<li><a href="/topic/dev/">/dev</a></li>
<li><a href="/topic/good-reads/">/good-reads</a></li>
<li><a href="/topic/art/">/art</a></li>
<li><a href="/topic/bookmarks/">/bookmarks</a></li>
<li><a href="/all-topics/">/all</a></li>
</ul>
<div class="col-sm-3 col-md-3 pull-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>更新:请参阅JSFiddle
Stack Overflow用户
发布于 2013-09-05 02:23:48
这是我可以在不添加任何自定义CSS的情况下获得的最接近的CSS(这是我在提出问题时已经想到的；我想我必须坚持这样做)：
和正在使用的标记：
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</form>PS:当然，这可以通过在按钮上添加负margin-left (-4px)，并删除input和button交会边的border-radius来修复。但这个问题的重点是让它在没有任何自定义CSS的情况下工作。
Stack Overflow用户
发布于 2013-09-14 01:09:06
您可以使用Bootstrap 3中的分段按钮示例：
<form action="" class="navbar-form navbar-right">
<div class="input-group">
<input type="Search" placeholder="Search..." class="form-control" />
<div class="input-group-btn">
<button class="btn btn-info">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</form>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18619740
复制相关文章
相似问题