Bootstrap导航栏下拉箭头覆盖文字及导航项右移问题咨询

问题1：下拉箭头覆盖菜单项文字 #

你遇到的箭头覆盖文字问题，核心原因是自定义了导航栏高度（70px），和Bootstrap默认的.nav-link内边距、下拉箭头布局产生了冲突。这里有几个简单实用的解决办法：

• 调整链接内边距：给下拉菜单项的.nav-link增加右侧内边距，为箭头预留足够空间：

.nav-item.dropdown .nav-link {
  padding-right: 2.5rem;
}

• 优化垂直对齐与间距：给.dropdown-toggle添加Bootstrap内置的弹性布局类，让文字和箭头垂直居中，同时给箭头加一点左边距拉开距离：

<a class="nav-link dropdown-toggle d-flex align-items-center" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  More <span class="ml-1"></span>
</a>

另外也可以检查下导航栏的line-height是否和设置的高度匹配，确保内容垂直居中，避免元素挤压重叠。

问题2：导航菜单项向右偏移的Bootstrap内置类 #

当然有现成的Bootstrap类可以实现，完全不需要额外写CSS：

• 整个导航栏菜单项右移：把<ul class="navbar-nav mr-auto">里的mr-auto换成ml-auto。mr-auto的作用是让导航项靠左，把右侧空间留给其他元素；ml-auto则会把导航项整体推到右侧。
• 单个菜单项右移：如果只想让某一个菜单项（比如你的"More"）右移，给对应的<li class="nav-item dropdown">添加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="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> More </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
      <a class="dropdown-item" href="/support/">Support and Consulting</a>
      <a class="dropdown-item" href="/test-driven-development/">What is Test-Driven Development?</a>
      <a class="dropdown-item" href="/testimonials/">Testimonials</a>
    </div>
  </li>
</ul>

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