html - 引导程序中的垂直导航
问题描述
<body>
<div class="container mt-3">
<h2>Vertical Nav</h2>
<p>Use the .flex-column class to create a vertical nav:</p>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</body>
如图所示,如何在侧边栏右侧使用更多选项以这种方式在引导程序中制作导航栏? 在此处输入图像描述
解决方案
您可以从 Bootstrap 站点查看示例页面。
https://getbootstrap.com/docs/5.1/examples/
查看下面的演示:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<div class="container">
<div class="row p-5">
<div class="col">
<h5>Section</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Link</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Link</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Link</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Link</a></li>
</ul>
</div>
<div class="col">
<h5>Section</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Link</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Link</a></li>
</ul>
</div>
<div class="col">
<h5>Section</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Link</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Link</a></li>
</ul>
</div>
</div>
</div>
推荐阅读
- javascript - 我怎样才能在这种链接上添加一个请稍候的电话
- openshift - Openshift OKD 过多的日志记录
- c++ - 为什么向量化使用浮点数比使用双精度数更有效?
- ocaml - Opam 可以安装最新的软件包并告诉'Already up-to-date'?
- c - C 中是否有一个函数可以在 Linux 上获取当前进程的虚拟运行时?
- php - 计算按列分组的模式
- c - 为什么我的 const 值会改变它的值?(C)
- reactjs - 我想在反应中显示加载
- python - Phython panda 添加一个新列,其中包含一些行的条目
- qt - QML TreeView 仅获取第二个孩子的点击事件