使用特定模板时将下拉菜单添加到引导菜单

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>