Bootstrap Navbar - 向右移动一个导航项
洛克什·阿格拉瓦尔
在我的引导程序导航栏中，我想证明右侧的注销按钮是正确的。
Pen 演示当前行为的示例：https : //codepen.io/agrawalo/pen/mdbKYLX
代码：
<nav class="mb-1 navbar navbar-expand-sm navbar-dark bg-dark sticky-top">
<div class="container">
<!-- Collapse content -->
<div class="justify-content-end">
<!--Links-->
<ul class="navbar-nav">
<li class="nav-item {% if current == 'Allocate' %}active{% endif %}">
<a class="nav-link" href="/">Allocate Stocks</a>
</li>
<li class="nav-item {% if current == 'Portfolio' %}active{% endif %}">
<a class="nav-link" href="/portfolio">Portfolio</a>
</li>
<li class="nav-item {% if current == 'Transactions' %}active{% endif %}">
<a class="nav-link" href="/transactions">Transactions</a>
</li>
<li class="nav-item">
<a class="nav-link {% if current == 'Leaderboard' %}active{% endif %}" href="/leaderboard">Leaderboard</a>
</li>
<li class="nav-item {% if current == 'Rules' %}active{% endif %}">
<a class="nav-link" href="/rules">Rules</a>
</li>
<li class="nav-item {% if current == 'Resources' %}active{% endif %}">
<a class="nav-link" href="/resources">Resources</a>
</li>
<li class="nav-item justify-content-end">
<a class="nav-link" href="/logout">Logout</a>
</li>
</ul>
</div>
</div>
</nav>
我怎样才能做到这一点？
道
为了实现它，您需要两个.navbar-nav元素而不是一个元素，并将mr-auto类放在第一个或ml-auto第二个上。
您还必须将以下 CSS 应用于它们的直接包装器：
display: flex;
flex: 1 0 100%;
align-items: center;
默认情况下，该 CSS 是通过类collapse& 应用的navbar-collapse，您似乎已将其删除。
有关导航栏正确标记的完整示例，请参阅 Bootstrap 文档：Navbar。
你的工作，更新的 codepen。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
在Bootstrap中将最后一个标签向右移动
- 2
“移动” Bootstrap-Navbar无法正常工作
- 3
Bootstrap 按钮不会向右移动
- 4
在 Bootstrap 4 中，“.navbar-toggler”按钮不会向右浮动
- 5
Bootstrap：在 navbar-fixed-top 和 navbar-fixed-bottom 之间创建一个动态 div
- 6
Bootstrap 3 Navbar元素堆叠-导航栏品牌未缩放
- 7
Bootstrap 3 Navbar-导航栏的折叠属性问题
- 8
Center Bootstrap Navbar-不了解导航为何无法居中
- 9
Center Bootstrap Navbar-不了解导航为何无法居中
- 10
Bootstrap 3 Navbar-导航栏的折叠属性问题
- 11
崩溃不适用于Bootstrap的移动NavBar
- 12
Bootstrap Navbar按钮堆叠在移动设备中
- 13
Bootstrap NavBar未对齐，尤其是在移动视图中
- 14
Bootstrap：如何使用navbar？
- 15
Bootstrap Navbar定制设计
- 16
Bootstrap Navbar CSS问题
- 17
Bootstrap Navbar填充
- 18
Bootstrap Navbar搜索栏
- 19
Bootstrap Navbar CSS问题
- 20
Bootstrap Navbar下拉错误
- 21
BootStrap Navbar崩溃问题
- 22
Bootstrap Navbar对齐
- 23
Bootstrap NavBar最大高度
- 24
AngularJs中的Bootstrap Navbar
- 25
Bootstrap-另一个div内的navbar-fixed-top
- 26
在Twitter Bootstrap Navbar中将所有元素对齐在一个水平行中
- 27
Navbar Bootstrap允许将一个项目放置在汉堡形Glyphicon之外
- 28
Bootstrap 4 NAVBAR 包含三个项目
- 29
为什么 React Bootstrap Navbar 一直折叠？
我来说两句