Bootstrap导航栏搜索按钮

Question

我正在尝试通过以下方式在导航栏上实现搜索菜单。 有两种设计，一种是前屏幕<767像素，另一种是767像素以上的屏幕。

基本上，我可以展开搜索栏，但是扩展栏的位置显示不正确。

 $(function(){ $("#search-button, #search-icon").click(function(e){ e.preventDefault(); $("#search-button, #search-form").toggle(); }); }) 

 #search-form { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <!-- Fixed navbar --> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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="#">Project name</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Menu 1</a> </li> <li><a href="#contact">Menu 2</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li> <form role="search"> <button id='search-button' class='btn btn-default '><span class='fa fa-search'></span></button> <div id='search-form' class="form-group"> <div class="input-group"> <span id='search-icon' class="input-group-addon"><span class='fa fa-search'></span></span> <input type="text" class="form-control" placeholder="Search"> </div> </div> </form> </li> <li><a href=""><i class="fa fa-user"></i></a> </li> <li><a href="">Log In <span class="sr-only">(current)</span></a> </li> </ul> </div> <!--/.nav-collapse --> </div> </nav> 

Answer 1

我会尝试的； 它遵循用于将表单添加到navbar默认引导程序，然后您可以使用CSS对其进行调整以适用于移动视口。

 $(function() { $("#search-button, #search-icon").click(function(e) { e.preventDefault(); $("#search-button, #search-form").toggle(); }); }); 

 #search-form { display: none; } @media (max-width: 767px) { .custom-navbar { text-align: right; } .custom-navbar #search-button { float: none; border: none; right: 0; text-align: right; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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="#">Project name</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Menu 1</a> </li> <li><a href="#contact">Menu 2</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="/"><i class="fa fa-user"></i></a> </li> <li><a href="/">Log In <span class="sr-only">(current)</span></a> </li> </ul> <form class="navbar-form navbar-right custom-navbar" role="search"> <button id="search-button" class="btn btn-default"><span class="fa fa-search"></span> </button> <div id="search-form" class="form-group"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search"><span id="search-icon" class="input-group-addon"><span class="fa fa-search"></span></span> </div> </div> </form> </div> </div> </nav>