我的下拉菜单没有显示 bootstrap 的图标
My dropdown is not displaying icons of bootstrap
```<nav class="nav-menu d-none d-lg-block">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/projects">Projects</a></li>
<li class="drop-down"><a href="/pre-engineered-steel-buildings">Pre Engineered Building</a>
<ul>
<li><a href="/industrial-steel-building">Industrial</a></li>
<li><a href="/commercial-building">MultiStoried Commercial Buildings</a></li>
<li><a href="/industrial-warehouse-construction">Warehouse</a></li>
<li><a href="/institutional-building">Institutional Building</a></li>
</ul>
</li>
<li class="drop-down"><a href="/turnkey-contractors">Turnkey Solutions</a>
<ul>
<li><a href="/civil-construction-work">Civil Works</a></li>
<li><a href="/heavy-steel-structures">Heavy Steel Structures</a></li>
</ul>
</li>
<li class="drop-down"><a href="/roofing-system">Roofing Solutions</a>
<ul>
<li><a href="/standing-seam-roof-contractors">Standing Seam Roof Systems</a></li>
<li><a href="/colour-coated-roofing-sheets-manufacturer">Color Coated Roofing Sheets</a></li>
<li><a href="/insulated-roofing-sheets-manufacture">Insulated Roof System</a></li>
<li><a href="/trussless-roofing-system">Trussless Roof System</a></li>
<li><a href="/deck-sheets-manufacturer">Deck Sheets</a></li>
<li><a href="/polycarbonate-sheets-manufacturer">Polycarbonate</a></li>
<li><a href="/turbo-ventilators-manufacturer">Turbo Ventilators</a></li>
</ul>
</li>
<li><a href="/peb-solutions-hospital-buildings">Covid-19 PreFab Cabin</a></li>
<li><a href="/contact">Contact Us</a></li>
</ul>
</nav> ```
使用 Bootstrap 完成。箭头图标和汉堡图标不可见。桌面版只显示一个框,移动版什么也没有。
Desktop Navigation Bar
Phone navigation Bar
您的代码缺少许多 Bootstrap 组件,例如下拉菜单的切换锚标记。最好坚持使用 Bootstrap 的标准菜单系统。
此外,由于 Bootstrap 使用下拉菜单中的顶部菜单项作为按钮来激活切换,您不能将其用作页面的 link。我将您的 link 移到了下拉列表中的第一项。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-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="/projects">Projects</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Pre Engineered Building
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/pre-engineered-steel-buildings">Pre Engineered Building</a>
<a class="dropdown-item" href="/industrial-steel-building">Industrial</a>
<a class="dropdown-item" href="/commercial-building">MultiStoried Commercial Buildings</a>
<a class="dropdown-item" href="/industrial-warehouse-construction">Warehouse</a>
<a class="dropdown-item" href="/institutional-building">Institutional Building</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Turnkey Solutions
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/turnkey-contractors">Turnkey Solutions</a>
<a class="dropdown-item" href="/civil-construction-work">Civil Works</a>
<a class="dropdown-item" href="/heavy-steel-structures">Heavy Steel Structures</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Roofing Solutions
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/roofing-system">Roofing Solutions</a>
<a class="dropdown-item" href="/standing-seam-roof-contractors">Standing Seam Roof Systems</a>
<a class="dropdown-item" href="/colour-coated-roofing-sheets-manufacturer">Color Coated Roofing Sheets</a>
<a class="dropdown-item" href="/insulated-roofing-sheets-manufacture">Insulated Roof System</a>
<a class="dropdown-item" href="/trussless-roofing-system">Trussless Roof System</a>
<a class="dropdown-item" href="/deck-sheets-manufacturer">Deck Sheets</a>
<a class="dropdown-item" href="/polycarbonate-sheets-manufacturer">Polycarbonate</a>
<a class="dropdown-item" href="/turbo-ventilators-manufacturer">Turbo Ventilators</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/peb-solutions-hospital-buildings">Covid-19 PreFab Cabin</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Covid-19 PreFab Cabin</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact Us</a>
</li>
</ul>
</div>
</nav>
最好在提问时使用代码段工具。这样,您就可以查看问题中的代码是否足够。
```<nav class="nav-menu d-none d-lg-block">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/projects">Projects</a></li>
<li class="drop-down"><a href="/pre-engineered-steel-buildings">Pre Engineered Building</a>
<ul>
<li><a href="/industrial-steel-building">Industrial</a></li>
<li><a href="/commercial-building">MultiStoried Commercial Buildings</a></li>
<li><a href="/industrial-warehouse-construction">Warehouse</a></li>
<li><a href="/institutional-building">Institutional Building</a></li>
</ul>
</li>
<li class="drop-down"><a href="/turnkey-contractors">Turnkey Solutions</a>
<ul>
<li><a href="/civil-construction-work">Civil Works</a></li>
<li><a href="/heavy-steel-structures">Heavy Steel Structures</a></li>
</ul>
</li>
<li class="drop-down"><a href="/roofing-system">Roofing Solutions</a>
<ul>
<li><a href="/standing-seam-roof-contractors">Standing Seam Roof Systems</a></li>
<li><a href="/colour-coated-roofing-sheets-manufacturer">Color Coated Roofing Sheets</a></li>
<li><a href="/insulated-roofing-sheets-manufacture">Insulated Roof System</a></li>
<li><a href="/trussless-roofing-system">Trussless Roof System</a></li>
<li><a href="/deck-sheets-manufacturer">Deck Sheets</a></li>
<li><a href="/polycarbonate-sheets-manufacturer">Polycarbonate</a></li>
<li><a href="/turbo-ventilators-manufacturer">Turbo Ventilators</a></li>
</ul>
</li>
<li><a href="/peb-solutions-hospital-buildings">Covid-19 PreFab Cabin</a></li>
<li><a href="/contact">Contact Us</a></li>
</ul>
</nav> ```
使用 Bootstrap 完成。箭头图标和汉堡图标不可见。桌面版只显示一个框,移动版什么也没有。
Desktop Navigation Bar
Phone navigation Bar
您的代码缺少许多 Bootstrap 组件,例如下拉菜单的切换锚标记。最好坚持使用 Bootstrap 的标准菜单系统。
此外,由于 Bootstrap 使用下拉菜单中的顶部菜单项作为按钮来激活切换,您不能将其用作页面的 link。我将您的 link 移到了下拉列表中的第一项。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-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="/projects">Projects</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Pre Engineered Building
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/pre-engineered-steel-buildings">Pre Engineered Building</a>
<a class="dropdown-item" href="/industrial-steel-building">Industrial</a>
<a class="dropdown-item" href="/commercial-building">MultiStoried Commercial Buildings</a>
<a class="dropdown-item" href="/industrial-warehouse-construction">Warehouse</a>
<a class="dropdown-item" href="/institutional-building">Institutional Building</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Turnkey Solutions
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/turnkey-contractors">Turnkey Solutions</a>
<a class="dropdown-item" href="/civil-construction-work">Civil Works</a>
<a class="dropdown-item" href="/heavy-steel-structures">Heavy Steel Structures</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Roofing Solutions
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/roofing-system">Roofing Solutions</a>
<a class="dropdown-item" href="/standing-seam-roof-contractors">Standing Seam Roof Systems</a>
<a class="dropdown-item" href="/colour-coated-roofing-sheets-manufacturer">Color Coated Roofing Sheets</a>
<a class="dropdown-item" href="/insulated-roofing-sheets-manufacture">Insulated Roof System</a>
<a class="dropdown-item" href="/trussless-roofing-system">Trussless Roof System</a>
<a class="dropdown-item" href="/deck-sheets-manufacturer">Deck Sheets</a>
<a class="dropdown-item" href="/polycarbonate-sheets-manufacturer">Polycarbonate</a>
<a class="dropdown-item" href="/turbo-ventilators-manufacturer">Turbo Ventilators</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/peb-solutions-hospital-buildings">Covid-19 PreFab Cabin</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Covid-19 PreFab Cabin</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact Us</a>
</li>
</ul>
</div>
</nav>
最好在提问时使用代码段工具。这样,您就可以查看问题中的代码是否足够。