カスタムナビバーをブートストラップのドロップダウンメニューに変換する

Question

小さな画面（電話機やタブレットなど）で表示したときに、ナビゲーションバーをドロップダウンメニューに変換したいと思っています。問題は、私は従来のブートストラップナビゲーションバーシステムを使用せず、自分自身で作成したことです。通常のブートストラップソリューションでは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列は、1つのクラスcollapse navbar-collapseと id="bs-example-navbar-collapse-1"

5. にdiv要素を追加したクラスにnav navbar-nav

6. を追加headernav要素

7. がnavクラスにナビゲーションバーを付けてくださいnavbar-default

8. 基本的にあなたが今やっていることである行を削除し、それがulがliの

にそこにdiv Sを回し 行い、col-md-6列に

にdiv要素を行を削除しますブートストラップナビを書くために必要なステップを実行します。例をよく見てください。http://getbootstrap.com/components/#navbar 実際にグリッドシステムを使用していないことがわかります。

あなたがtoggle機能を使用できるようにするため、ブートストラップJavaScriptを含める必要がある点に注意してください。

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

またも、あなたのナビゲーションでp要素を入れないでください。段落は意味をなさない。