Bootstrap导航栏CSS样式不生效求助：透明与居中设置失效

问题描述 #

想要给Bootstrap导航栏添加轻微透明效果，同时让导航栏内的链接居中显示，但自定义CSS样式无法生效。以下是原代码：

HTML代码 #

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                
                <!--Navigation bar-->
                <nav class="navbar navbar-expand-md bg-dark navbar-dark transparent" id="navbar">
                    <a class="navbar-brand" href="index.html">
                        <img src="images/DallE_Extendo-removebg.png" width="80" height="60" alt="">
                        </a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav">
                            <li class="nav-item active">
                                <a class="nav-link" href="index.html">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="aboutus.html">About us</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="products.html">Products</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="contactus.html">Contact us</a>
                            </li>                        
                        </ul>
                    </div>
                </nav>
                <!--NavBar Ends-->

                <img src="images/ShopInsideBooking (4).png" class="img-fluid" alt="Responsive image">

            </div>
        </div>
    </div>    
</body>

原CSS代码 #

#navbar{
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
}

问题原因 #

1. 背景色不生效：Bootstrap的bg-dark类自带!important声明（background-color: #212529 !important;），优先级远高于普通ID选择器，导致自定义背景色被完全覆盖。
2. 链接不居中：直接给#navbar加justify-content: center会让导航栏内所有元素（品牌logo、折叠按钮、导航链接）整体居中，但品牌logo占据左侧空间，视觉上导航链接并没有真正居中。

解决方案 #

方案一：保留bg-dark类，强制覆盖样式 #

用更具体的选择器结合!important突破Bootstrap的样式优先级，同时调整导航链接容器的对齐方式：

/* 覆盖bg-dark的背景色，实现透明效果 */
nav#navbar.bg-dark {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* 让导航链接所在的容器单独居中 */
#navbar .navbar-collapse {
    justify-content: center;
}

方案二：移除bg-dark类，直接自定义背景色 #

去掉HTML中nav标签的bg-dark类，避免内置样式冲突，再调整CSS：

修改后的HTML（nav标签部分）

<nav class="navbar navbar-expand-md navbar-dark transparent" id="navbar">

修改后的CSS

#navbar {
    background-color: rgba(0, 0, 0, 0.5);
}

/* 让导航链接容器居中 */
#navbar .navbar-collapse {
    justify-content: center;
}

两种方案都能实现需求，方案二更简洁，避免使用!important，推荐优先采用。

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