[英]How to Add dropdown in Bootstrap 4?
I have updating my bootstrap 3 template to bootstrap 4 version. 我已经将bootstrap 3模板更新为bootstrap 4版本。 Now problem is sub-menu(drop-down) in my Navigation header not works in bootstrap 4 and it's works in bootstrap 3. How to Add Sub-menu for services list in Bootstrap 4? 现在问题是我的导航标题中的子菜单(下拉菜单)在引导程序4中不起作用,并且在引导程序3中有效。如何在引导程序4中为服务列表添加子菜单? Here is my code, 这是我的代码,
<a class='navbar-brand' href='#'>Start Bootstrap</a>
<button class='navbar-toggler' type='button' data-toggle='collapse' data-target='#navbarResponsive' aria-controls='navbarResponsive' aria-expanded='false' aria-label='Toggle navigation'>
<span class='navbar-toggler-icon'></span>
</button>
<div class='collapse navbar-collapse' id='navbarResponsive'>
<ul class='navbar-nav ml-auto'>
<li class='nav-item active'>
<a class='nav-link' href='#'>Home
<span class='sr-only'>(current)</span>
</a>
</li>
<li class='nav-item'>
<a class='nav-link' href='#'>About</a>
</li>
<li class='nav-item'>
<a class='nav-link' href='#'>Services</a>
</li>
<li class='nav-item'>
<a class='nav-link' href='#'>Contact</a>
</li>
</ul>
</div>
<div class="dropdown">
<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>
@Dinesh Kumar, hopefully this helps you. @Dinesh Kumar,希望这对您有所帮助。 I've included a codeply project with the working code. 我在工作代码中包含了一个Codeply项目 。 It takes your code and adds the following markup after your contact list-item: 它需要您的代码,并在您的联系人列表项之后添加以下标记:
...
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<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>
</li>
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.