当菜单处于紧凑模式时，为切换菜单图标提供颜色

Question

当 html 页面紧凑到移动视图时，我正在尝试为菜单切换器图标提供背景颜色。由于菜单背景颜色设置为白色，如果屏幕紧凑，则无法看到菜单切换图标。所以我试图给背景颜色或给它的边框颜色。

这里是代码

 <nav class="navbar  navbar-expand-sm navbar-toggleable-sm navbar-dark" id="main-nav">
                <div class="container">

                    <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MyCompany</a>
                    <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"
                            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="navbar-collapse collapse">
                        <ul class="navbar-nav ml-auto">
                            <li class="nav-item active">
                                <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">About Us</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">
                                    Our
                                    Project
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">Contact</a>
                            </li>
                        </ul>
                    </div>
                </div>
</nav>

然后在 custom.css 文件中，我给了颜色，还是不行

.custom-toggler.navbar-toggler {
    border-color: rgb(255,102,203) !important;
}

Answer 1

您的 css 样式文件是否正确导入？我用了你的风格才有效，你可以参考我这边，可能对你有用。

这是我从官方获得的一个例子，添加了我介绍的bootstrap5和自定义css样式：

<nav class="navbar navbar-expand-lg navbar-custom navbar-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</nav>

@section Scripts{
    <script src="~/bootstrap/js/bootstrap.js"></script>
   
    <link href="~/bootstrap/css/custom.css" rel="stylesheet" />
}

自定义css样式：

.navbar-custom {
    background-color: #4433cc;
}

    /* change the brand and text color */
    .navbar-custom .navbar-brand,
    .navbar-custom .navbar-text {
        color: #ffcc00;
    }

    /* change the link color */
    .navbar-custom .navbar-nav .nav-link {
        color: #ffbb00;
    }

    /* change the color of active or hovered links */
    .navbar-custom .nav-item.active .nav-link,
    .navbar-custom .nav-item:focus .nav-link,
    .navbar-custom .nav-item:hover .nav-link {
        color: pink;
    }

    /* for dropdowns only */
    .navbar-custom .navbar-nav .dropdown-menu {
        /* background-color: deepskyblue;*/
        border-color: rgb(255,102,203) !important;
    }

    /* dropdown item text color */
    .navbar-custom .navbar-nav .dropdown-item {
        color: #000000;
    }

        /* dropdown item hover or focus */
        .navbar-custom .navbar-nav .dropdown-item:hover,
        .navbar-custom .navbar-nav .dropdown-item:focus {
            color: #eeeeee;
            background-color: red;
        }

这里我把你的border-color: rgb(255,102,203) !important;样式放在.navbar-custom .navbar-nav .dropdown-menu上，结果如下：