Выпадающие элементы не отформатированы должным образом - PullRequest
Новая
       0

Выпадающие элементы не отформатированы должным образом

0 голосов
/ 11 марта 2020 
Rails 6
Bootstrap 4

Я пытаюсь создать панель навигации, используя выпадающие меню, с кнопками. Я ожидаю, что выделенный элемент выпадающего меню будет синим, но это не так. Пожалуйста, смотрите картинку.

enter image description here

Вот мой код: 

#NaviagationBar.btn-group
  .dropdown
    button#BooksMenu.btn.btn-primary.dropdown-toggle aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" type="button"
      | Books
    .dropdown-menu aria-labelledby="BooksMenu"
      button.btn.dropdown-item type="button"  Action
      button.btn.dropdown-item type="button"  Another action
      button.btn.dropdown-item type="button"  Something else here
  .dropdown
    button#CardsMenu.btn.btn-primary.dropdown-toggle aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" type="button"
      | Cards
    .dropdown-menu aria-labelledby="CardsMenu"
      button.btn.dropdown-item type="button"  Action
      button.btn.dropdown-item type="button"  Another action
      button.btn.dropdown-item type="button"  Something else here

Есть идеи?

РЕДАКТИРОВАТЬ:

Пункты меню превращаются в синюю кнопку при нажатии на нее, но не при наведении на нее курсора.

Ответы [ 2 ]

0 голосов
/ 11 марта 2020

Вы можете написать правило css клиента, чтобы указать раскрывающийся список и элементы внутри, чтобы изменить цвет при наведении или фокусировке. CssTricks - Hover-inside эта ссылка говорит о псевдо-селекторе hover-inside. Но это также объясняет, что вы также можете сделать это с помощью только фокуса и / или наведения

0 голосов
/ 11 марта 2020

Просто замените dropdown-item btn класс на btn btn-primary w-100 с вашей кнопки выпадающего элемента?

Замените: 

<button class="dropdown-item btn" href="#">Action</button>

На: 

<button class="btn btn-primary w-100" href="#">Action</button>


<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  </head>
  <body>
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <button class="btn btn-primary w-100" href="#">Action</button>
        <button class="btn btn-primary w-100" href="#">Another action</button>
        <button class="btn btn-primary w-100" href="#">Something else here</button>
      </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...