Bootstrap 4导航项右对齐问题求助：仅移导航项而非品牌标识

嘿，我来帮你搞定这个问题！你用的是Bootstrap的导航栏组件，其实不用折腾自定义CSS，利用框架内置的类就能轻松实现只把导航项右移、品牌留在左侧的效果。

问题根源 #

你原来的导航项列表用了mr-auto类，这个类的作用是给元素添加margin-right: auto，在Bootstrap的flex布局导航栏里，它会把导航项往左侧推，正好和你想要的相反。

解决方案 #

只需要把<ul>标签的mr-auto替换成ml-auto（margin-left: auto）就可以了。这个类会让导航项在flex容器里自动填充左侧的可用空间，从而把自己挤到右侧，而navbar-brand会自然留在左侧。

修改后的完整代码 #

<nav class="navbar navbar-expand-lg">
  <a class="navbar-brand" href="#">Portfolio</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <!-- 把mr-auto改成ml-auto -->
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Blogs</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " href="#">Projects</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " href="#">LinkedIn</a>
      </li>
    </ul>
  </div>
</nav>

额外说明 #

这个方法完全兼容响应式：在移动端屏幕下，导航栏折叠后，ml-auto不会影响垂直布局的导航项，折叠菜单的显示依然正常。如果你一定要用自定义CSS实现，也可以给.navbar-nav添加样式：

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

但更推荐用Bootstrap内置类，这样更符合框架的设计规范，也能避免潜在的样式冲突。

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