將自定義導航欄轉換爲引導程序上的下拉菜單

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元素在您的導航。段落在這裏沒有任何意義。