html - 导航项目不正确
问题描述
我正在尝试创建一个导航栏,它有 3 个部分(左导航、徽标、右导航),但是无论我使用什么 flex 类,我都无法让正确的导航浮动在右侧。
这是我的 HTML:
<div class="header-navbar navbar-expand-sm navbar navbar-horizontal floating-nav navbar-dark navbar-without-dd-arrow navbar-shadow menu-border" role="navigation" data-menu="menu-wrapper">
<div class="navbar-header">
<ul class="nav navbar-nav flex-row">
<li class="nav-item mr-auto">
<a class="navbar-brand" href="/">
<div class="brand-logo"></div>
<h2 class="brand-text mb-0">MyWebsite</h2></a>
</li>
<li class="nav-item nav-toggle"><a class="nav-link modern-nav-toggle pr-0" data-toggle="collapse"><i class="feather icon-x d-block d-xl-none font-medium-4 primary toggle-icon"></i><i class="toggle-icon feather icon-disc font-medium-4 d-none d-xl-block collapse-toggle-icon primary" data-ticon="icon-disc"></i></a></li>
</ul>
</div>
<div class="navbar-container main-menu-content navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2" data-menu="menu-container">
<ul class="nav navbar-nav mr-auto" id="main-menu-navigation" data-menu="menu-navigation">
<li class="nav-item active"><a class="nav-link" href="/play"><i class="feather icon-home"></i><span>Play</span></a></li>
<li class="nav-item"><a class="nav-link" href="/stats"><i class="feather icon-bar-chart"></i><span>Statistics</span></a></li>
<li class="nav-item"><a class="nav-link" href="/leaderboard"><i class="fa fa-trophy"></i><span>Leaderboards</span></a></li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="/">
<div class="brand-logo"></div>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2"><span class="navbar-toggler-icon"></span></button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="nav navbar-nav mr-auto" id="main-menu-navigation" data-menu="menu-navigation">
<li class="nav-item active"><a class="nav-link" href="/register"><i class="fa fa-user-plus"></i><span>Register</span></a></li>
<li class="nav-item"><a class="nav-link" href="/login"><i class="fa fa-sign-in"></i><span>Login</span></a></li>
</ul>
</div>
</div>
从下面可以看出,结果是:
解决方案
问题是您
mr-auto
在最后一列中使用,而不是ml-auto
因为您需要左边而不是右边的边距,以便它自己对齐到右边
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="nav navbar-nav flex-row">
<li class="nav-item mr-auto">
<a class="navbar-brand" href="/">
<div class="brand-logo"></div>
<h2 class="brand-text mb-0">MyWebsite</h2></a>
</li>
<li class="nav-item nav-toggle"><a class="nav-link modern-nav-toggle pr-0" data-toggle="collapse"><i class="feather icon-x d-block d-xl-none font-medium-4 primary toggle-icon"></i><i class="toggle-icon feather icon-disc font-medium-4 d-none d-xl-block collapse-toggle-icon primary" data-ticon="icon-disc"></i></a></li>
</ul>
<ul class="nav navbar-nav mr-auto" id="main-menu-navigation" data-menu="menu-navigation">
<li class="nav-item active"><a class="nav-link" href="/play"><i class="feather icon-home"></i><span>Play</span></a></li>
<li class="nav-item"><a class="nav-link" href="/stats"><i class="feather icon-bar-chart"></i><span>Statistics</span></a></li>
<li class="nav-item"><a class="nav-link" href="/leaderboard"><i class="fa fa-trophy"></i><span>Leaderboards</span></a></li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="#">Navbar 2</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="nav navbar-nav ml-auto" id="main-menu-navigation" data-menu="menu-navigation">
<li class="nav-item active"><a class="nav-link" href="/register"><i class="fa fa-user-plus"></i><span>Register</span></a></li>
<li class="nav-item"><a class="nav-link" href="/login"><i class="fa fa-sign-in"></i><span>Login</span></a></li>
</ul>
</div>
</nav>
推荐阅读
- git - 红点标记 BitBucket 差异视图
- r - 提取R中每个单词的第一个字母
- javascript - 两点之间的Chartjs线条颜色
- c# - 表单提交后从数据库中检索最新的主键C#
- redis - Redis:二级索引到期
- apache-kafka - 尝试启动 Zookeeper 服务器时出错 - Confluent 设置
- vue.js - Vuex - Normalizr 无法按预期工作
- amazon-web-services - 在 AWS 上尝试 Dask
- php - 如果在 Woocommerce 中应用了任何优惠券代码,请删除一些支付网关
- selenium-webdriver - 如果条件为真,则获取 webelements 列表