ブートストラップナビゲーションバー

Question

私はブートストラップのドロップダウンメニューを画面上に広げる方法を知っていますが、見出しと一緒に次のようにリンクを表示する方法はわかりません。私は、ドロップダウン・メニューに私のリンクを追加すると

彼らはちょうど私が上記の結果を達成することができますどのように他の以下のものを見えますか？ ありがとう

Answer 1

誰もあなたのためにそれほどうまくそれをスタイルするつもりはないが、あなたが望む機能を実現するシングルボタンドロップダウン、約Bootstrap documentationから、この例を修正することを検討している：

<div class="dropdown open"> 
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    Dropdown button 
    </button> 
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> 
    <a class="dropdown-item" href="#">Action</a> 
    <a class="dropdown-item" href="#">Another action</a> 
    <a class="dropdown-item" href="#">Something else here</a> 
    </div> 
</div> 

Answer 2

必要なもの正しい質問をすることです。これは既に投稿されています：twitter bootstrap - multi column dropdown。複数列のドロップダウンが必要です。

Answer 3

あなたが使用しているブートストラップなら、あなたは、単にこれを行うことができます：

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">WebSiteName</a> 
    </div> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Page 1-1</a></li> 
      <li><a href="#">Page 1-2</a></li> 
      <li><a href="#">Page 1-3</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Page 2</a></li> 
<ul class="dropdown-menu"> 
      <li><a href="#">Page 2-1</a></li> 
      <li><a href="#">Page 2-2</a></li> 
      <li><a href="#">Page 1-3</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Page 3</a></li> 
    </ul> 
    </div> 
</nav>