如何在Bootstrap 3中将带有图标的search框添加到导航栏中？

我正在使用新的Twitter Bootstrap 3，并试图在顶部的导航栏中放置一个如下所示的search框：

在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中生成如此多的变化。

引导程序3中的导航栏search框表单的默认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> 

我如何修改它来实现我所需要的？

Answer 1

我在一个开发网站上运行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

Answer 2

如果不添加任何自定义的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：当然，可以通过在button上添加一个负margin-left （-4像素），并删除两侧input和button相遇的border-radius解决这个问题。 但是这个问题的关键就是让它在没有任何自定义CSS的情况下工作。

Answer 3

您可以使用Bootstrap 3中的分段button示例：

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

Answer 4

我尝试了@PhilNicholas的代码，并在search栏显示在导航栏的下一行中的注释中提到了@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> 

Answer 5

这一个我为我的网站实施，如果有人得到更多的菜单项和更长的search栏可以使用这个

这是代码

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

Answer 6

 <!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="#">&laquo;</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="#">&raquo;</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> [e-mail] </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>