首页 > 解决方案 > 带有下拉菜单的 Bootstrap 4.6 导航栏项目不会与其他菜单项垂直对齐

问题描述

我有一个相当简单的导航栏,但无法弄清楚为什么带有下拉菜单的导航项目不与其他项目垂直对齐。Devtools 显示“li”的高度相同 - 54,但“a”在常规项目上为 32,在下拉菜单上为 34。

在此处输入图像描述

<div class='d-flex align-items-center px-5'>
  <div class='nav d-none d-xl-block' id='nav-menu-xl'>
  <nav class='nav-menu'>
    <ul>
      <li class='nav-item'>
        <a class='nav-link' href=''>Members</a>
      </li>
      <li class='nav-item drop-down'>
        <a class='nav-link' href=''>Benefits</a>
        <ul>
          <li><a href=''>Benefit 1</a></li>

我看过 devtools 并比较了计算,直到我的眼睛流泪了,不明白为什么一个会比另一个有 2 个像素的差异。

标签: twitter-bootstrapbootstrap-4

解决方案


推荐阅读