html - Bootstrap 4 响应时显示导航链接
问题描述
我有一个功能齐全的导航栏。我的问题是如何在页面响应时显示导航链接。这是我的代码供参考:
<div class="collapse navbar-collapse w-100 order-1 order-lg-0" id="navbarNav">
<ul class="nav navbar-nav ml-auto">
<ul class="navbar-nav mr-auto mt2 mt-lg-0 text-uppercase">
<li class="nav-item">
<a class="nav-link" href="#">USD $ <i class="fa fa-angle-down" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Cart (1)</a> <!-- This one must display at the right side of the navbar -->
</li>
<li class="nav-link" id="removeOnCollapse">
<a href=""><i class="fa fa-search mt-auto mx-3" style="color: black;"
aria-hidden="true"></i></a>
</li>
</ul>
</ul>
</div>
这就是我想要的:
有什么办法可以做到这一点吗?
解决方案
只需使用 bootstrap flex 即可<div class="d-flex justify-content-between">...</div>
如需更多参考,请阅读此处https://getbootstrap.com/docs/4.0/utilities/flex/
推荐阅读
- updatepanel - 母版页更新面板的内容页面中的重复器中的按钮单击 (ItemCommand) 不起作用
- oracle - Oracle PL/SQL 未找到数据 - 非连续 Id 值
- c++ - C++ 引发错误:在从头文件调用构造函数时使用未声明的标识符 C++
- android - 无法显示阵列适配器项目它采用背景颜色
- pseudocode - 如何编写一个伪代码来识别符合录取条件的申请人并输出他们的姓名、学号和学习方式
- javascript - Vue视图在视图之间切换但不加载时工作
- wordpress - 如何从对象中获取值而不是键以用于 vue.js 绑定(:class)
- javascript - discord.js 中的 MySQL
- python - discord.py 错误:IndentationError: unindent 不匹配任何外部缩进级别
- webpack - 使用 Electron 构建基于 webpack 的 svelte 应用程序时如何使用 require()?