具有可折叠搜索的引导程序导航

Question

我想在bootstrap中使用可折叠搜索框进行导航，像wordpress二十四个主题导航可以帮助我吗？ 我想要像这样的导航，

Answer 1

根据您要复制的导航的数量，它实际上只是对现有引导导航的一些调整。但是，由于复制崩溃条很棘手（对我来说无论如何），这是一种使用两个搜索输入的方式，一次只显示一个，具体取决于设备。还有平板电脑+搜索的弹出窗口。

<强> Here's a Bootply

在平板电脑和更大的平板电脑上搜索（hidden-xs在手机上隐藏此搜索栏）：

  <a id="example" type="button" class="btn btn-default navbar-btn hidden-xs pull-right btn-link btn-blk" data-toggle="popover" data-placement="bottom" data-html="true" data-content="
    <form class='form-inline' role='search'>
      <div class='form-group'>
        <input type='email' class='form-control' placeholder='Search'>
      </div>
      <button type='submit' class='btn btn-default'>Go!</button>
    </form>" data-container="body">
    <span class="glyphicon glyphicon-search"></span>
  </a>

仅在手机上搜索：

  <form class="navbar-form navbar-left visible-xs" 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>

就像我说的那样..不确定你想要的样式与你的截图相匹配多少，但这非常接近：）