Bootstrap 5导航栏内边距移除及下拉菜单溢出截断问题求助

问题1：导航项边框与hover背景无法铺满导航栏高度 #

你尝试移除导航项链接的padding/margin，让左侧边框和hover背景色铺满导航栏高度但未成功。这是因为Bootstrap 5默认给.nav-link和.navbar设置了内边距，且元素高度未对齐。

解决步骤： #

1. 移除导航栏自身的上下内边距，同时让内部容器拉伸对齐高度
2. 调整导航链接的内边距，使其高度与导航栏完全匹配
3. 修正样式选择器（你代码里的.navbar-default是Bootstrap 3的类，Bootstrap 5已废弃）

修改后的CSS代码：

.navbar {
    background-color: #0078d2;
    border-color: #0065b1;
    margin: 0 !important;
    /* 移除导航栏上下内边距 */
    padding-top: 0;
    padding-bottom: 0;
}

/* 让导航栏内部容器拉伸，确保子元素高度对齐 */
.navbar .container-fluid {
    display: flex;
    align-items: stretch;
}

.navbar-text,
.navbar-brand,
.navbar-link,
.navbar-nav .nav-link {
    color: white !important;
}

.navbar-nav .nav-link.active {
    color: red !important;
}

/* 调整导航链接样式，铺满导航栏高度 */
.navbar-nav .nav-link {
    border-left: .1rem solid #ccc;
    /* 移除上下内边距，设置左右内边距 */
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 1rem;
    padding-right: 1rem;
    /* 让链接高度铺满父元素，垂直居中文字 */
    display: flex;
    align-items: center;
    height: 100%;
}

/* hover/focus状态背景铺满 */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    background-color: #0065B1;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

问题2：下拉菜单溢出浏览器边框 #

带下拉菜单的菜单项因文本过宽导致下拉菜单被浏览器边框截断，可通过以下几种方法解决：

方法1：让下拉菜单右对齐 #

给下拉菜单添加dropdown-menu-end类，使其从父元素右侧开始定位，避免溢出：

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown link
    </a>
    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
</li>

方法2：允许下拉项文本换行 #

设置下拉菜单最大宽度并允许文本自动换行，避免横向溢出：

.dropdown-menu {
    max-width: 220px; /* 根据需求调整最大宽度 */
    white-space: normal; /* 取消强制不换行 */
}

方法3：调整下拉菜单的定位方式 #

通过data-bs-placement属性指定下拉菜单的定位方向，比如bottom-end：

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" data-bs-placement="bottom-end" aria-expanded="false">
    Dropdown link
</a>

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