Bootstrap 5导航栏项目如何对齐到侧边？

你的代码存在三个核心问题导致样式不生效：

• CSS选择器语法错误：navbar-nav是类选择器，需要在前面加.标识，即正确写法为.navbar-nav，你写的写法无法命中对应DOM元素，自然所有样式都不会生效
• 你给导航列表<ul>添加了me-auto类，该类会给元素设置margin-right: auto，会强制占用右侧剩余空间，本身就阻止了导航栏右对齐
• 自定义样式引用顺序错误：你的styles.css放在Bootstrap CSS的前面，根据CSS层叠规则，后面引入的Bootstrap样式会覆盖前面的自定义样式，就算选择器写对也不会生效
• 额外补充：Flex布局中不存在align-items: right、text-align: flex-end这类属性值，属于属性用法错误

最优解决方案（无需自定义CSS） #

Bootstrap 5内置了对应的工具类，直接修改HTML即可实现需求：

1. 调整CSS引用顺序，把自定义样式放在Bootstrap样式之后
2. 找到导航列表的<ul>标签，将上面的me-auto类替换为ms-auto，该类会给元素设置margin-left: auto，自动占用左侧剩余空间，直接把整个导航列表推到右侧
3. 如果需要适配小屏折叠后的导航项也右对齐，可以给<ul>额外加align-items-end类即可

修改后的核心代码示例：

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 先引Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <!-- 再引自定义CSS -->
  <link rel="stylesheet" href="styles.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scratch Bookmarklets</title>
</head>

<ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-start align-items-end">
  <!-- 原有导航项内容不变 -->
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </a>
    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li>
        <hr class="dropdown-divider">
      </li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

如果需要下拉菜单也跟随右对齐，给下拉菜单的<ul>加dropdown-menu-end类即可。

如果你确实需要用自定义CSS实现，正确的写法如下：

/* 注意选择器前面加. */
.navbar-nav {
  margin-left: auto;
}
/* 小屏折叠后右对齐 */
@media (max-width: 991px) {
  .navbar-nav {
    align-items: flex-end;
  }
  .navbar-nav .dropdown-menu {
    right: 0;
    left: auto;
  }
}

内容的提问来源于stack exchange，提问作者1ens