我正在使用新的Twitter Bootstrap 3,我正在尝试放置一个这样的搜索框(如下) in the top navbar :
在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 回答
我在开发站点上运行BS3,然后生成您要求的效果/布局 . 当然你需要在BS3中设置的字形 .
更新:见JSFiddle
这是我可以在不添加任何自定义CSS的情况下获得的最接近的(这是我在问这个问题时已经想到的;猜猜我要坚持这个):
并使用标记:
PS: 当然,可以通过在按钮上添加负
margin-left
(-4px)来修复,并删除两边input
和button
见面的border-radius
. 但这个问题的重点是让它在没有任何自定义CSS的情况下工作 .您可以使用Bootstrap 3中的分段按钮示例:
我尝试了@PhilNicholas的代码并得到了同样的问题@its_me在评论中说,搜索栏显示在导航栏的下一行,我发现
form
需要添加一个属性width
.这是我为我的网站实现的,如果有人得到更多没有菜单项,更长的搜索栏可以使用它
这是代码