html - 为什么 navbar-right 既不能正常工作,也不能向右浮动
问题描述
navbar-right 不起作用,我查看了具有相同问题的其他问题,但找不到使其起作用的方法。我什至尝试在 li 元素上浮动,但不起作用。
<nav class="navbar navbar-expand-lg navbar-light bg-transparent fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
<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 id="nav-content" class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto navbar-right">
<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="#">Link</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">
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">
<a class="nav-link" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<div id="view" class="full-page-cover"></div>
解决方案
假设您为此使用引导程序,如果您想要将导航栏与页面的最右侧对齐,则应<ul class="navbar-nav mr-auto navbar-right">
将<ul class="navbar-nav ml-auto navbar-right">
. 在引导程序中,mr-auto 在元素右侧添加边距,ml-auto 在元素左侧添加边距。
所以最终的代码应该是,
<nav class="navbar navbar-expand-lg navbar-light bg-transparent fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
<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 id="nav-content" class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto navbar-right">
<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="#">Link</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">
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">
<a class="nav-link" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<div id="view" class="full-page-cover"></div>
推荐阅读
- angular - 角度原理图无法删除文件
- typescript - 是否可以从联合中排除空对象?
- python - 如何遍历文件夹中的文件以获取 Python 中列的最大值?
- android - Android Studio ADB 未找到错误 Flutter
- docker-compose - 从外部容器访问 fusionAuth-app UI(外部访问)?
- blockchain - 如何在 ThunderCore 主网上发送交易和转移 TT?
- javascript - 如何检查href属性是否包含字符串?
- meson-build - 如何添加编译器标志,如 cmake `-DCMAKE_CXX_FLAGS_DEBUG=xxx`
- postgresql - 无法启动 PostgreSQL
- python - 无法使用 pyenv -Build Failed OSX 错误安装 python 3.6.8