Bootstrap的float-right类不生效，导航栏按钮无法右对齐如何解决

问题原因 #

1. 类名拼写错误
   你写的flaot-right是拼写错误，正确的类名应为float-right，拼写错误的类不会生效。
2. Float属性在Flex布局下无效
   Bootstrap的导航栏默认采用Flex布局，Flex容器的直接子元素设置float属性会被CSS规范强制忽略，哪怕拼写正确也不会生效，导航栏的对齐场景完全不需要用float类实现。
3. HTML结构不规范
   Logout按钮对应的li标签直接作为div.navbar-nav的子元素，列表项必须嵌套在ul/ol标签内，结构错误也可能导致样式异常。

修正方案 #

直接利用Bootstrap自带的Flex间距工具类实现右对齐，你代码里左侧菜单的ul已经加了me-auto类，这个类本身就会自动将后续的所有元素推到容器最右侧，只需要调整结构即可：

<header>
  <nav class="navbar navbar-expand-md navbar-dark bg-success">
    <a class="navbar-brand" href="/urls">TinyApp</a>
    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarNavAltMarkup"
      aria-controls="navbarNavAltMarkup"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <!-- 左侧导航菜单，me-auto自动占满剩余宽度，推挤右侧元素右对齐 -->
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link" href="/urls">URLs</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/urls/new">New URL</a>
        </li>
      </ul>
      <!-- 右侧操作区 -->
      <ul class="navbar-nav">
        <li class="nav-item">
          <button class="btn btn-outline-danger me-2">
            Logout
          </button>
        </li>
      </ul>
    </div>
  </nav>
</header>

如果你使用的是Bootstrap 5版本，需要把折叠触发属性从data-toggle/data-target改成data-bs-toggle/data-bs-target，否则汉堡菜单的折叠功能会失效。

内容的提问来源于stack exchange，提问作者Abubakar Oluyinka