html - 在引导导航栏中彼此相邻制作下拉菜单
问题描述
我无法使用导航栏引导程序我试图在视图端口的升降侧放置两个下拉菜单,我使用的引导程序是 rtl,我得到了这样的导航栏引导程序:
<nav class="navbar fixed-top navbar-expand-sm navbar-dark">
<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>
<!-- Links -->
<div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
<ul class="navbar-nav float-right">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
</ul>
<div class="bg-danger flex-row">
<ul class="navbar-nav">
<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">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown ">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button"
data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
我想要两个带有链接的下拉菜单.bg-danger
相互连接......我应该怎么做?
解决方案
这是html代码,将两者<li>
放入单个<ul>
<nav class="navbar fixed-top navbar-expand-sm navbar-dark">
<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>
<!-- Links -->
<div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
<ul class="navbar-nav float-right">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
</ul>
<div class="bg-danger flex-row">
<ul class="navbar-nav">
<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">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown ">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button"
data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
如果您遇到任何问题,请告诉我。
推荐阅读
- shell - 分配包含变量的变量
- r - 使用 TRAVIS CI 检查 R 代码会出现错误:命令 "grep -q -R "WARNING" "${RCHECK_DIR}/00check.log"" exited with 0
- python - 当我在一个类中覆盖 __div__ 方法时,为什么在我测试代码时它不起作用?
- android - 反应原生android,在尝试获取firebase消息设备令牌时得到FIS_AUTH_ERROR
- c# - 无法将类型“int”隐式转换为“bool”Unity
- amazon-web-services - AWS Cost Explorer API - 查询兑换的积分?
- javascript - 事件源连接无法在远程主机上保持活动状态
- vue.js - 我是 Vue js 和 Vue Router 的初学者,找不到 404 页面错误
- sprite-kit - 为什么 SceneKit 材质看起来不同,即使图像相同?
- c# - c# foreach 循环迭代与查询执行时间的列表