将自定义导航栏转换为引导程序上的下拉菜单

Question

我想要在更小的屏幕（如手机和平板电脑）上查看时，将导航栏转换为下拉菜单。问题是，我没有使用传统的引导程序导航栏系统，只是做了我自己的。我知道通常的bootstrap解决方案涉及到使用nav类，但我不确定如何将这些类集成到我自己的代码中，因为我没有使用它们开始。对于平板电脑，我希望将主菜单按钮隐藏到带有切换按钮的下拉菜单中，同时将徽标保留在那里。这里是我的代码：

<header class="main-header" id="Navigation"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-3"> 
       <img class="HeaderLogo img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1499450095/Enpowered_Logo_k69cqw.png"> 
      </div> 
      <div class="col-md-6 text-center"> 
       <div class="row text-center"> 
        <div class="col-md-2 offset-md-1"> 
         <p class="NavBarButtons"> WHY US </p> 
        </div> 
        <div class="col-md-2"> 
         <p class="NavBarButtons"> FIX YOUR BILL </p> 
        </div> 
        <div class="col-md-2"> 
         <p class="NavBarButtons"> HOW IT WORKS </p> 
        </div> 
        <div class="col-md-2"> 
         <p class="NavBarButtons"> LEARN WITH US </p> 
        </div> 
        <div class="col-md-2"> 
         <p class="NavBarButtons"> COMMERCIAL </p> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-3"> 
       <div class="row"> 
        <div class="col-md-3 offset-md-4"> 
         <p class="NavBarButtons"> LOG IN </p> 
        </div> 
        <div class="col-md-4 md-offset-3"> 
         <button class="SignUp"><b> UNLOCK YOUR POWER </b></button> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</header> 

，因为我用的网格系统，一切都崩溃相当不错，直到某一点，那么整个头部完全弄糟和堆栈，这就是为什么我想尝试具有菜单按钮去当达到该断点时，进入下拉菜单。任何帮助都非常感谢。谢谢！

Answer 1

当您试图在.navbar以外执行此操作时，您会失去很多烘焙功能，但它是可管理的。 .navbar-collapse组件本身并不直接与使用较大的组件相关联;你只需要包括崩溃的<button>和包装元素：

<header class="main-header" id="Navigation"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-xs-3"> 
       <img class="HeaderLogo img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1499450095/Enpowered_Logo_k69cqw.png"> 
      </div> 

      <div class="col-xs-9 text-right"> 
       <div class="row"> 
        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-collapse" aria-expanded="false"> 
          <span class="sr-only">Toggle navigation</span> 
          <span class="icon-bar">-</span> 
          <span class="icon-bar">-</span> 
          <span class="icon-bar">-</span> 
         </button> 
        </div> 

        <div class="collapse navbar-collapse text-center" id="menu-collapse"> 
         <div class="col-md-2"><p class="NavBarButtons">WHY US</p></div> 
         <div class="col-md-2"><p class="NavBarButtons">FIX YOUR BILL</p></div> 
         <div class="col-md-2"><p class="NavBarButtons">HOW IT WORKS</p></div> 
         <div class="col-md-2"><p class="NavBarButtons">LEARN WITH US</p></div> 
         <div class="col-md-2"><p class="NavBarButtons">COMMERCIAL</p></div> 
         <div class="col-md-1"><p class="NavBarButtons">LOG IN</p></div> 
         <div class="col-md-1"><button class="SignUp"><b>UNLOCK YOUR POWER</b></button></div> 
        </div> 
       </div> 
      </div> 

     </div> 
    </div> 
</header> 

...

当你遇到问题（为什么我会建议使用全.navbar结构，就是你需要风格上述按钮及其各种状态，你还需要解决间距问题（下拉按这种方式推动元件）

Answer 2

这是非常讨厌的，但..你可以做一些调整你的代码做，所以你会这样结束了：

<nav class="main-header navbar navbar-default" id="Navigation"> 
    <div class="container-fluid"> 
     <div class="col-md-3 navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
       <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="#"> 
       <img class="HeaderLogo img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1499450095/Enpowered_Logo_k69cqw.png" style="width: auto;"> 
      </a> 
     </div> 
     <div class="col-md-6 text-center collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="text-center nav navbar-nav"> 
       <li class="col-md-2 offset-md-1"> 
        <p class="NavBarButtons"> WHY US </p> 
       </li> 
       <li class="col-md-2"> 
        <p class="NavBarButtons"> FIX YOUR BILL </p> 
       </li> 
       <li class="col-md-2"> 
        <p class="NavBarButtons"> HOW IT WORKS </p> 
       </li> 
       <li class="col-md-2"> 
        <p class="NavBarButtons"> LEARN WITH US </p> 
       </li> 
       <li class="col-md-2"> 
        <p class="NavBarButtons"> COMMERCIAL </p> 
       </li> 
      </ul> 
     </div> 
     <div class="col-md-3"> 
      <div class="row"> 
       <div class="col-md-3 offset-md-4"> 
        <p class="NavBarButtons"> LOG IN </p> 
       </div> 
       <div class="col-md-4 md-offset-3"> 
        <button class="SignUp"><b> UNLOCK YOUR POWER </b></button> 
       </div> 
      </div> 
     </div> 
    </div> 
</nav> 

这里就是我所做的：

1. 给col-md-3类navbar-header

2. 在有加

    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
   

3. 添加<a class="navbar-brand" href="#">您各地

4. 的col-md-6列，添加类collapse navbar-collapse和 id="bs-example-navbar-collapse-1"

5. 在一个DIV的添加类nav navbar-nav

6. 充分利用header一个nav元素

7. 给这个nav类导航栏navbar-default

8. 删除行

9. 在col-md-6列中的格，删除行，并使其成为ul 打开div在里面进入li小号

基本上你现在所做的是采取必要的步骤编写引导程序导航。仔细看看http://getbootstrap.com/components/#navbar 的示例您会看到它实际上不使用网格系统。

请记住，您需要包含bootstrap javascript才能使用toggle功能。

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 

此外，不要把p元素在您的导航。段落在这里没有任何意义。