如何调整Bootstrap导航栏项对齐？解决!important无效问题

你的CSS代码无效的核心原因是选错了目标元素：.nav-item是单个导航菜单项的<li>标签，给它设置justify-content: end只会让菜单项内部的链接右对齐，根本不会让整个导航列表移到导航栏末尾。

要实现导航项在大屏幕右对齐，同时不影响小屏幕折叠菜单的布局，你需要针对Bootstrap的响应式断点（navbar-expand-lg对应的是992px及以上屏幕），调整导航列表的父容器或导航列表本身的布局：

方法一：给导航列表设置自动左外边距 #

这是Bootstrap中最常用的导航项右对齐方式：

/* 仅在大屏幕（lg及以上）生效 */
@media (min-width: 992px) {
  .navbar-nav {
    margin-left: auto;
  }
}

方法二：给折叠容器设置内容右对齐 #

通过调整折叠容器的flex对齐属性实现：

@media (min-width: 992px) {
  .collapse.navbar-collapse {
    justify-content: end;
  }
}

为什么这两种方法不会影响小屏幕布局？ #

因为我们用了@media (min-width: 992px)媒体查询，这个断点和你用的navbar-expand-lg完全匹配——只有当屏幕宽度≥992px时，导航栏才会展开显示所有菜单项，此时我们的自定义样式生效；屏幕小于992px时，导航栏会自动折叠成菜单按钮，自定义样式不会触发，完全保留Bootstrap默认的折叠菜单布局。

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