javascript - Bootstrap 导航栏搜索按钮

Question

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

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

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

我会尝试这个；它遵循 Bootstrap 默认向 navbar 添加表单，然后您可以使用 CSS 调整它以适应移动视口(viewport)。

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