Html 导航栏中的字幕+;右对齐的项目
我有一个带字幕的导航条,字幕使用了这里的技术: 不幸的是,当我添加子标题时,我失去了导航栏上的右对齐-这意味着我需要一些项目右对齐,它们是,但自从添加子标题后就不再是了 你知道我如何将导航条子标题与右对齐结合起来吗Html 导航栏中的字幕+;右对齐的项目,html,bootstrap-4,Html,Bootstrap 4,我有一个带字幕的导航条,字幕使用了这里的技术: 不幸的是,当我添加子标题时,我失去了导航栏上的右对齐-这意味着我需要一些项目右对齐,它们是,但自从添加子标题后就不再是了 你知道我如何将导航条子标题与右对齐结合起来吗 <nav class="navbar navbar-expand-lg navbar-light bg-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" da
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-flex flex-column">
<div class="d-sm-flex d-block flex-nowrap">
<div class="collapse navbar-collapse">
<ul id="navbar-section-list" class="navbar-nav mr-auto">
... a bunch of li/a here to represent left aligned items
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown-item-right">
<a id="refresh-button" class="nav-link" href="#">Refresh</a>
</li>
<li class="nav-item dropdown dropdown-item-right justify-content-end">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Account</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<span id="account-info-header" class="dropdown-item-text"></span>
<a class="dropdown-item">Settings</a>
<a class="dropdown-item" href="/auth/v1/logout">Log out</a>
</div>
</li>
</ul>
</div>
</div>
<small id="navbar-node-info"></small>
</div>
</nav>
... 这里有一堆表示左对齐项的li/a
-
-
我认为“刷新”和“帐户”的正确对齐是由“mr auto”属性提供的:
<ul id="navbar-section-list" class="navbar-nav mr-auto">
但可悲的是,我不知道为什么它停止使用“flex”
我尝试在第二个ul.navbar-nav上添加一个
justify content end
,但没有效果,仍然没有正确的对齐方式。这里是解决您问题的JSFIDLE,您只需要将w-100
添加到
类中
... 这里有一堆表示左对齐项的li/a
-
-