Html 如何在 Bootstrap 3 的导航栏中添加带有图标的搜索框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18619740/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 13:03:05 来源:igfitidea点击:
How to add a search box with icon to the navbar in Bootstrap 3?
提问by its_me
I am using the new Twitter Bootstrap 3, and am trying to place a search box like this (below) in the top navbar:
我正在使用新的 Twitter Bootstrap 3，并试图在顶部导航栏中放置一个这样的搜索框（如下）：
In Bootstrap 2, it could've ben done like this:
在 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>
But I am not sure how to produce the same in Bootstrap 3 as so much has changed.
但是我不确定如何在 Bootstrap 3 中生成相同的内容，因为发生了很多变化。
The default HTML for the navbar search box form in Bootstrap 3 is:
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>
How do I modify it to achieve what I need?
我如何修改它以达到我所需要的？
回答by Phil Nicholas
I'm running BS3 on a dev site and the following produces the effect/layout you're requesting. Of course you'll need the glyphicons set up in BS3.
我在开发站点上运行 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>
UPDATE: See JSFiddle
更新：见JSFiddle
回答by its_me
This is the closest I could get without adding any custom CSS (this I'd already figured as of the time of asking the question; guess I've to stick with this):
这是我在不添加任何自定义 CSS 的情况下可以获得的最接近的结果（在提出问题时我已经想到了这一点；我想我必须坚持下去）：
And the markup in use:
以及正在使用的标记：
<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:Of course, that can be fixed by adding a negative margin-left(-4px) on the button, and removing the border-radiuson the sides inputand buttonmeet. But the whole point of this question is to get it to work without any custom CSS.
PS：当然，这可以通过margin-left在按钮上添加一个负（-4px），并删除border-radius侧面input和button相遇来解决。但是这个问题的重点是让它在没有任何自定义 CSS 的情况下工作。
回答by praisegeek
You could use the segmented buttons example from Bootstrap 3:
您可以使用 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>
回答by gy8409
I tried @PhilNicholas 's code and got the same problem of @its_me said in the comments that search bar show up on the next line of navbar, and I found that formneed to be added an attribute width.
我尝试了@PhilNicholas 的代码并遇到了@its_me 在评论中说的相同问题，搜索栏显示在导航栏的下一行，我发现form需要添加一个属性width。
<form role="search" style="width: 15em; margin: 0.3em 2em;">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</form>
回答by vinayak hegde
This one I implemented for my website , If some one got more no's of menu item and longer search bar can use this
这是我为我的网站实现的，如果有人有更多的菜单项和更长的搜索栏可以使用它
Here is the code
这是代码
<style>
.navbar-inverse .navbar-nav > li > a {
color: white !important;
}
.navbar-inverse .navbar-nav > li > a:hover {
text-decoration: underline;
}
.navbar-collapse ul li {
padding-top: 0px;
padding-bottom: 0px;
}
.navbar-collapse ul li a {
padding-top: 0px;
padding-bottom: 0px;
}
.navbar-brand img {
width: 200px;
height: 40px;
}
.navbar-inverse {
background-color: #3A1B37;
}
</style>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" runat="server" href="~/">
<img src="http://placehold.it/200x40/3A1B37/ffffff/?text=Apllicatin"></a>
<div class="col-md-6 col-sm-8 col-xs-11 navbar-left">
<div class="navbar-form " role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term" style="max-width: 100%; width: 100%;">
<div class="input-group-btn">
<button class="btn btn-default" style="background: rgb(72, 166, 72);" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</div>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-brand visible-md visible-lg visible-sm" style="visibility: hidden;" runat="server">
<img src="http://placehold.it/200x40/3A1B37/ffffff/?text=Apllicatin" />
</li>
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Contact">Contact</a></li>
<li><a runat="server" href="~/">Somthing</a></li>
<li><a runat="server" href="~/">Somthing</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a runat="server" href="~/Account/Register">Register</a></li>
<li><a runat="server" href="~/Account/Login">Log in</a></li>
</ul> </div>
</div>
</div>
回答by Nguy?n Anh Tu?n
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>3 Col Portfolio - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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" href="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="input-group">
<input type="text" name="keyword" placeholder="search..." class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">Go</button>
</span>
</div>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<!-- Page Header -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Page Heading
<small>Secondary Text</small>
</h1>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
<a href="#">Project Name</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
<a href="#">Project Name</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
<a href="#">Project Name</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
<a href="#">Project Name</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
<a href="#">Project Name</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
<a href="#">Project Name</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
<a href="#">Project Name</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
<a href="#">Project Name</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
<a href="#">Project Name</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
<a href="#">Project Name</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
<a href="#">Project Name</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
<a href="#">Project Name</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
<a href="#">Project Name</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
<a href="#">Project Name</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
<a href="#">Project Name</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
<a href="#">Project Name</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Pagination -->
<div class="row text-center">
<div class="col-lg-12">
<ul class="pagination">
<li>
<a href="#">«</a>
</li>
<li class="active">
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#">»</a>
</li>
</ul>
</div>
</div>
<!-- /.row -->
</div>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<h3>About</h3>
<ul>
<li>
<i class="glyphicon glyphicon-home"></i> Your company address here
</li>
<li>
<i class="glyphicon glyphicon-earphone"></i> 0982.808.065
</li>
<li>
<i class="glyphicon glyphicon-envelope"></i> [email protected]
</li>
<li>
<i class="glyphicon glyphicon-flag"></i> <a href="#">Fan page</a>
</li>
<li>
<i class="glyphicon glyphicon-time"></i> 08:00-18:00 Monday to Friday
</li>
</ul>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<h3>Support</h3>
<ul>
<li>
<a href="#" class="link">Terms of Service</a>
</li>
<li>
<a href="#" class="link">Privacy policy</a>
</li>
<li>
<a href="#" class="link">Warranty commitment</a>
</li>
<li>
<a href="#" class="link">Site map</a>
</li>
</ul>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<h3>Other</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<!-- /.row -->
</footer>
<!-- /.container -->
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>