如何在 Bootstrap 3 的导航栏中添加带有图标的搜索框? [英] How to add a search box with icon to the navbar in Bootstrap 3?
问题描述
我正在使用新的 Twitter Bootstrap 3,并试图在顶部导航栏中放置一个这样的搜索框(下方):
在 Bootstrap 2 中,它可以这样做:
</表单>
但我不确定如何在 Bootstrap 3 中生成相同的内容,因为发生了如此多的变化.
Bootstrap 3 中导航栏搜索框表单的默认 HTML 是:
<button type="submit" class="btn btn-default">提交</button></表单>
我如何修改它以达到我的需要?
我在一个开发站点上运行 BS3,下面会产生您请求的效果/布局.当然,您需要在 BS3 中设置字形.
<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><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>