我正在尝试使用 bootstrap 5 创建一个标题。在标题中，我有一个导航栏，其中包含我想浮动到右侧的链接。查看引导网站后，我注意到他们在菜单列表项中添加了 justifty-content-end 类。当我这样做时，项目保留在左侧。我什至尝试将 float: right 添加到导航中，但这也不起作用。
这是我的html
<nav class="navbar navbar-dark bg-dark">
<!-- Navbar content -->
<ul class="nav justify-content-end" id="myNavbar">
<li class="nav-item">
<a class="nav-link" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>我的CSS
ul {
float: right !important:
}有人可以解释一下如何解决这个问题吗？
检查这个解决方案，我已经在我的机器上尝试过了，这段代码工作正常。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
</head>
<body>
<nav class="navbar navbar-dark bg-dark d-flex justify-content-end">
<!-- Navbar content -->
<ul class="nav" id="myNavbar">
<li class="nav-item">
<a class="nav-link" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
这对我有用。
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-dark bg-dark">
<!-- Navbar content -->
<div class="container-fluid d-flex justify-content-end">
<ul class="nav" id="myNavbar">
<li class="nav-item">
<a class="nav-link" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>我也遇到了完全相同的问题。无论我在哪里应用 justify-content-end，即 nav 元素或 ul，它都不会起作用。
我终于找到了一些有用的东西：我将“ms-auto”类放置在导航栏的 ul 中。这将默认边距 (m) 位置 (e = 结束) 切换到导航项的左侧 (s = 开始) - 用于从右到左书写。
这是对我有用的东西：
<nav class="navbar navbar-dark bg-dark">
<!-- Navbar content -->
<ul class="nav ms-auto" id="myNavbar">
<li class="nav-item">
<a class="nav-link" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</nav>
值得注意的是，在 Bootstrap 4 中，这些类使用了 ml（左边距）和 mr（右边距），并在 Bootstrap 5 中切换为 ms（边距开始）和 me（边距结束），以便与 RTL 和 LTR 编写者无关，我自己让自己找到这个问题的答案变得更加困难，因为其中有很多都提到了ML和先生。希望这有帮助。
因为导航栏的宽度不是页面的100%。即使您设置了导航栏内容的浮动，它也只会在导航栏中发生变化。
您可以尝试将导航栏的浮动设置到右侧。
或者将导航栏的宽度设置为 100% 并向内容添加 float:right ，如下所示。
<nav class="navbar navbar-dark" style="background-color:green;width:100%;height:100px;">
<!-- Navbar content -->
<ul class="nav justify-content-end" style="float:right;" id="myNavbar">
<li class="nav-item">
<a class="nav-link" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>