Question

我想在黑色导航栏中添加一个下拉菜单，但是当我尝试使用该菜单时，文本的颜色为蓝色，如果单击它，则弹出菜单的背景为白色，并且会干扰我的黑色背景，所以我想使它透明。使用引导 v4.1.1

<nav className="navbar navbar-expand-md navbar-dark bg-dark">
                <a className="navbar-brand" href="/home">home</a>
                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01"
                        aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"/>
                </button>



<div className="collapse navbar-collapse" id="navbarColor01">
    <ul className="navbar-nav mr-auto">
        <li className="nav-item">
            <a className="nav-link" href="/user">Users</a>
        </li>
        <li className="nav-item" >
            <li className="dropdown nav-link">
                <a className="dropdown-toggle" data-toggle="dropdown" href="#">Create new
                    </a>
                <ul className="dropdown-menu">
                    <li><a href="#">Page 1-1</a></li>
                    <li><a href="#">Page 1-2</a></li>
                    <li><a href="#">Page 1-3</a></li>
                </ul>
            </li>
        </li>
    </ul>
</div>
</nav>

因此，“新建”必须为白色，页面链接也必须为白色。当我单击“新建”时，其中带有页面的弓必须是透明的。

我将如何实现这一目标？我试图把它放在我的CSS中：

.dropdown a{
    color: rgba(255,255,255,.5);
}

但是当我这样做时，它起作用了，但是当我单击它时，页面将不会显示，我只会看到一个白框。

Thx

Answer 1

在下拉列表中使用bg-dark类。另外，您还想对“创建新”链接使用nav-link，以便像navbar-dark的所有其他链接一样轻巧。

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <a class="navbar-brand" href="/home">home</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarColor01">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="/user">Users</a>
            </li>
            <li class="nav-item">
            </li>
            <li class="dropdown">
                <a class="dropdown-toggle nav-link" data-toggle="dropdown" href="#">Create new
                    </a>
                <ul class="dropdown-menu bg-dark">
                    <li><a href="#" class="nav-link">Page 1-1</a></li>
                    <li><a href="#" class="nav-link">Page 1-2</a></li>
                    <li><a href="#" class="nav-link">Page 1-3</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

https://www.codeply.com/go/VKvvHSVl98

Answer 2

You can replace your code with my code start doing css everything going to work nicely

<div class="collapse navbar-collapse">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item">
            <a class="nav-link" href="/user">Users</a>
        </li>
        <ul class="nav-item" >
            <li class="dropdown nav-link">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Create new
                    </a>
                <ul class="dropdown-menu">
                    <li><a href="#">Page 1-1</a></li>
                    <li><a href="#">Page 1-2</a></li>
                    <li><a href="#">Page 1-3</a></li>
                </ul>
            </li>
        </ul>
    </ul>
  </div>

着色下拉菜单

2 个答案: