Html 将搜索框表单添加到我的导航栏

我是前端设计新手，在导航栏中实现带有过滤器的搜索框时遇到了挑战。我知道这可能很琐碎，但我发现它非常具有挑战性，当我将searchbox代码插入到所需区域（在第二个代码块中注释）时，通常会导致混乱

搜索框的代码为：

<div class="container">
  <div class="row">
    <div class="col-xs-4 col-xs-offset-2">
      <div class="input-group">
        <div class="input-group-btn search-panel">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span id="search_concept">Filter by</span> <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#contains">Contains</a></li>
            <li><a href="#its_equal">It's equal</a></li>
            <li><a href="#greather_than">Greather than ></a></li>
            <li><a href="#less_than">Less than < </a></li>
            <li class="divider"></li>
            <li><a href="#all">Anything</a></li>
          </ul>
        </div>
        <input type="hidden" name="search_param" value="all" id="search_param">
        <input type="text" class="form-control" name="x" placeholder="Search term...">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button">
            <span class="glyphicon glyphicon-search"></span>
          </button>
        </span>
      </div>
    </div>
  </div>
</div>

过滤

导航栏的代码如下所示，带有一条注释，指示我需要搜索框的位置：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <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><a href="#">Home</a></li>
        <li><a href="#">About</a></li>

        <li>
          <!--SEARCH BAR HERE -->
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="./">Log in</a></li>
        <li><a href="./">Join us</a></li>
        <li><a href="#"><i class="fa fa-twitter color-twitter"></i></a></li>
        <li><a href="#"><i class="fa fa-facebook color-facebook"></i></a></li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
  <!--/.container-fluid -->
</nav>

切换导航

最终结果应类似于：

---

真诚的感谢

这是一个基于引导程序3的工作代码段（单击“展开代码段”）：

切换导航















过滤

Navbar组件的Bootstrap文档中都包含一个将表单集成到it中的示例：谢谢！我没有考虑在这个场合提到文件（这应该是一个显而易见的问题）。我会继续前进。