Bootstrap 4.0 выпадающее меню не использует всю высоту навигационной панели - PullRequest
Новая
       33

Bootstrap 4.0 выпадающее меню не использует всю высоту навигационной панели

1 голос
/ 10 января 2020

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

введите описание изображения здесь 

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <title>Heima</title>


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="static/landing/styles.css">

    .navbar-dark:hover .navbar-nav:hover .nav-link:hover
{
color: #fff;
width: 100%;
}

.bg-color{
background-color: #18191a;
}

.dropdown:hover{
background-color: #2f2f30;
height: 10%;
}

a:hover{
link-color: #fff;
color: #fff;
}

a{
link-color: #fff;
color: grey;
}

.nav-item dropdown
{
width: 100%;
}

</head>

<body>

  <nav class="navbar navbar-expand-sm bg-color navbar-dark">
    <!-- Brand -->
    <a class="navbar-brand" href="#">Logo</a>

      <!-- Dropdown -->
     <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Akfør
        </a>
        <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Dropdown link
        </a>
        <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Dropdown link
        </a>
        <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a>
        </div>
      </li>
    </ul>
  </nav>

</body>

</html>

1 Ответ

0 голосов
/ 10 января 2020

Насколько я понимаю, ваша проблема заключается в заполнении панели навигации.

Попробуйте добавить следующее к вашему css: 

.navbar {
padding: 0px 1rem;
}

Или добавьте следующий класс к панели навигации: 

py-0

Это удалит отступы и, следовательно, раскрывающаяся тень будет использовать всю высоту панели навигации.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...