如何将导航栏菜单按钮向右对齐？

从你的代码和描述来看，你使用的是Bootstrap导航组件，float属性失效是因为Bootstrap的navbar-header容器默认采用Flex布局，在Flex容器中float属性不会生效，需要用Flex相关的对齐方式来实现按钮右对齐。

以下是两种可行的解决方案：

方案1：使用Bootstrap内置工具类 #

直接给父容器navbar-header添加d-flex justify-content-between align-items-center类，利用Bootstrap的Flex工具类快速实现布局：

<div class="navbar-header d-flex justify-content-between align-items-center">
    <a href="#" class="navbar-brand">Logo</a>
    <button type="button" class="navbar-toggler" (click)="collapsed=!collapsed">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

• d-flex：强制开启Flex布局（如果父容器未默认开启）
• justify-content-between：让子元素在主轴上两端对齐
• align-items-center：保证子元素在交叉轴上垂直居中，维持导航栏的视觉一致性

方案2：自定义CSS样式 #

如果不想依赖Bootstrap工具类，可以通过自定义CSS实现：

.navbar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* 确保容器占满宽度，否则对齐效果不明显 */
}

或者单独给按钮设置margin-left: auto，利用Flex布局的自动margin特性将按钮推到右侧：

.navbar-toggler {
    margin-left: auto;
}

对应的HTML代码无需改动，保持你原来的结构即可。

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