Bootstrap 5导航栏按钮背景色无法完全修改的解决方法咨询

你给导航栏的Logo（navbar-brand）添加了bg-success类，但背景色仅包裹文字区域，没有填满导航栏的整个高度——这是因为Bootstrap的navbar-brand默认是行内/行内块元素，高度由内容决定，而导航栏本身带有上下内边距，导致背景色无法覆盖导航栏全高。

以下是两种可行的解决方法：

方法一：让Logo元素填满导航栏高度 #

通过自定义CSS或Bootstrap内置类，设置Logo的高度为100%，并配合Flex布局让文字垂直居中：

方式1：自定义CSS #

在样式表中添加：

#logo {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 1rem; /* 可根据需求调整左右内边距 */
}

方式2：使用Bootstrap内置类+行内样式 #

直接修改HTML：

<div class="container-fluid">
    <nav class="navbar navbar-dark navbar-expand-lg bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand bg-success d-flex align-items-center" href="#" id="logo" style="height:100%; padding:0 1rem;">Logo</a>
            ...
        </div>
    </nav>
</div>

方法二：调整导航栏与Logo的内边距 #

去掉导航栏的上下内边距，给Logo添加合适的内边距，让背景色自然填充：

<div class="container-fluid">
    <nav class="navbar navbar-dark navbar-expand-lg bg-dark py-0">
        <div class="container-fluid">
            <a class="navbar-brand bg-success py-3 px-4" href="#" id="logo">Logo</a>
            ...
        </div>
    </nav>
</div>

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