使用特定模板時將下拉菜單添加到引導菜單

Question

即時消息使用稱爲ruma的模板使用引導程序我只使用了模板中的導航欄，並嘗試了添加導航欄的各種方式。這裏沒有其他問題似乎回答我的需求。

<div class="navbar navbar-inverse navbar-static-top" style="border-bottom:none !important;"> 
 
     <div class="container"> 
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 
       <a class="navbar-brand" href="index">JACOB PUNTON</a> 
 
      </div> 
 
      <div class="navbar-collapse collapse"> 
 
       <ul class="nav navbar-nav navbar-right"> 
 
        <li><a href="index">HOME</a></li> 
 
        <li class="nav-selected"><a href="services">SERVICES</a> 
 
\t \t \t \t \t </li> 
 
        <li><a href="portfolio">PORTFOLIO</a></li> 
 
        <li><a href="contact">CONTACT</a></li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </div>

這是我的HTML，我需要在服務中添加一個下拉。請幫忙。

Answer 1

您好，你需要做的就是添加一個類下拉到你的列表元素，你可以做它像這樣

<li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<i class="fa fa-angle-down"></i></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Dropdown Link</a></li> 
         <li><a href="#">Dropdown Link</a></li> 
         <li><a href="#">Dropdown Link</a></li> 
        </ul> 
       </li> 

Answer 2

如果您前往的Docs你會看到完整的例子， navbar中的dropdown-menu的默認代碼。請參閱下面的示例代碼片段。

<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">DROPDOWN <span class="caret"></span></a> 

    <ul class="dropdown-menu"> 
     <li><a href="#">Action</a> 

     </li> 
     <li><a href="#">Another action</a> 

     </li> 
     <li><a href="#">Something else here</a> 

     </li> 
     <li role="separator" class="divider"></li> 
     <li><a href="#">Separated link</a> 

     </li> 
     <li role="separator" class="divider"></li> 
     <li><a href="#">One more separated link</a> 

     </li> 
    </ul> 
</li> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="navbar navbar-inverse navbar-static-top" style="border-bottom:none !important;"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 

 
     </button> <a class="navbar-brand" href="index">JACOB PUNTON</a> 
 

 
    </div> 
 
    <div class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="index">HOME</a> 
 

 
     </li> 
 
     <li class="nav-selected"><a href="services">SERVICES</a> 
 

 
     </li> 
 
     <li><a href="portfolio">PORTFOLIO</a> 
 

 
     </li> 
 
     <li><a href="contact">CONTACT</a> 
 

 
     </li> 
 
     <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">DROPDOWN <span class="caret"></span></a> 
 

 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a> 
 
      </li> 
 
      <li><a href="#">Another action</a> 
 
      </li> 
 
      <li><a href="#">Something else here</a> 
 
      </li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a> 
 
      </li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">One more separated link</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>