Bootstrap 4导航栏项右对齐问题求助

嘿，我看你在Bootstrap 4的导航栏布局上遇到小麻烦了——想把Logo固定在左边，导航链接挪到右边对吧？咱们来快速搞定这个问题～

你之前尝试的几种方法没成功，主要是没踩中Bootstrap 4导航栏的flex布局逻辑。其实只需要调整一个类就能实现你要的效果：

修正后的核心代码 #

把你原来导航栏里的 <ul class="navbar-nav mr-auto"> 改成 <ul class="navbar-nav ml-auto"> 就可以了！

完整的导航栏代码如下：

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light boxed" style="margin-top:30px;">
  <a class="navbar-brand logo" href="#"><img src="images/techno_vision_logo.png"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <!-- 把 mr-auto 替换成 ml-auto -->
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Eyeglasses <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Sunglasses</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact Lenses</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Services </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Offers</a>
      </li>
    </ul>
  </div>
</nav>

为什么这个方法有效？ #

Bootstrap 4的导航栏默认是flex布局，ml-auto 这个类的作用是给元素设置 margin-left: auto——在flex容器里，这个样式会把元素自动推到容器的右侧，正好符合你要导航链接居右的需求。

聊聊你之前的尝试为啥没成 #

• 用flex-container加row-reverse：这个操作会反转整个容器内的元素顺序，反而可能打乱Logo和导航的正常排列，而且Bootstrap导航栏本身已经是flex布局，没必要额外套容器。
• 给ul加mr-auto：mr-auto 是设置 margin-right: auto，会让导航列表靠左对齐，和你想要的效果正好相反。
• 给ul加ml-auto：如果你之前试过但没生效，大概率是自定义的 .boxed 类或者其他样式干扰了布局，可以检查一下这个类有没有设置额外的margin、padding或者flex属性。

赶紧试试上面的代码，应该就能看到Logo在左、导航链接在右的效果啦～

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