html - Bootstrap 5 - justifty-content-end 不工作

Question

我正在尝试使用引导程序 5 创建一个标题。在标题中，我有一个导航栏，其中包含我想向右浮动的链接。在查看引导网站后，我注意到他们在菜单列表项中添加了一个 justifty-content-end 类。当我这样做时，项目会留在左边。我什至尝试将 float: 添加到导航栏，但这也不起作用。

这是我的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:
}

有人可以解释如何解决这个问题吗？

标签： htmlcsstwitter-bootstrapbootstrap-5

Answer 1

因为导航栏的宽度不是页面的 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>