本文介绍了Bootstrap 4:在导航栏中向右对齐菜单?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用Bootstrap 4默认导航栏,我只想添加一个折叠菜单,该菜单在未折叠时位于右侧,而不是左侧.
I am working with the Bootstrap 4 default navbar and I just want to add a collapsing menu that is positioned on the right, not the left, when not collapsed.
我尝试添加text-right
和float-right
,但实际上都没有将菜单移到右侧.
I have tried adding text-right
and float-right
, but neither are actually moving the menu to the right.
这也是一个代码段,因为StackOverflow希望我使用其中一个,尽管我认为它的宽度不足以显示未折叠的菜单:
Here also is a snippet, since StackOverflow wants me to use one, though I don't think it'll be wide enough to show the non-collapsed menu:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-md">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</button>
<div class="collapse navbar-collapse float-right">
<ul class="nav navbar-nav">
<li class="active nav-item"><a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item"><a href="#about" class="nav-link">About</a>
</li>
<li class="nav-item"><a href="#contact" class="nav-link">Contact</a>
</li>
</ul>
</div>
</div>
</div>
推荐答案
将ml-auto
类添加到包含菜单的ul
标签中
Add ml-auto
class to ul
tag containing menu
<ul class="nav navbar-nav ml-auto">
<li class="active nav-item">
<a href="#" class="nav-link">Homes</a>
</li>
<li class="nav-item">
<a href="#about" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">Contact</a>
</li>
</ul>
这篇关于Bootstrap 4:在导航栏中向右对齐菜单?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!