Раскрытие раскраски - PullRequest
Новая
       10

Раскрытие раскраски

0 голосов
/ 08 апреля 2019

Я хотел бы сделать выпадающий список в моей черной навигационной панели, однако, когда я пытаюсь это сделать, цвет текста синий, и если я нажимаю на него, фон всплывающего окна белый и мешает моему черному фону, поэтому я хотел бы сделать это прозрачным. Использование начальной загрузки 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

Ответы [ 2 ]

1 голос
/ 08 апреля 2019
  • Вы можете заменить свой код моим кодом, начните делать css, все будет хорошо работать 

<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>
1 голос
/ 08 апреля 2019

Используйте класс 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

...