Совместите верхний край выпадающего меню Bootstrap 4 с нижним краем панели навигации

Question

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

Есть ли способ добиться этого? это без установки фиксированной высоты для панели навигации и использования margin-top в выпадающем меню?

Если я правильно помню, по умолчанию в Bootstrap 3 было выравнивание верхнего края выпадающего меню с нижним краемНавбар. Кажется, это изменилось в BS 4.

Вот мой HTML:

  <div class="navbar navbar-expand-lg flex-row shadow">
     <ul class="navbar-nav navbar-desktop flex-row ml-auto d-none d-lg-inline-flex">
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navSearchDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="fas fa-search"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navSearchDropdown">
                <div class="px-2">
                    <?php get_search_form(); ?>
                </div>
            </div>
        </li>
     </ul>
  </div>

Ожидаемый результат:

Фактический результат:

ОБНОВЛЕНИЕ:

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

Я добился того, чего хотел, используя следующее:

.navbar {
    padding: 0;
}
.navbar .container {
    align-items: stretch;
}

Затем добавив отступы к бренду и каждую навигационную ссылку кактребуется.

Answer 1

Вы можете добавить поле для выпадающего меню. Вы должны указать, потому что выпадающее меню имеет поле по умолчанию:

.dropdown-menu {
	margin: 8px 0px!important;
}

<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light ">
    <a class="navbar-brand mr-0" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-between align-items-center w-100" id="navbarNavDropdown">
      <ul class="navbar-nav mx-auto text-md-center ">
        <li class="nav-item active">
          <a class="nav-link" href="#">Item1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item2</a>
        </li>
        <li class="nav-item dropdown flex-row justify-content-md-center justify-content-start flex-nowrap">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown">
            Dropdown
          </a>
          <div class="dropdown-menu ">
            <a class="dropdown-item" href="#">dropdown item 1</a>
            <a class="dropdown-item" href="#">dropdown item 2</a>
            <a class="dropdown-item" href="#">dropdown item 3</a>
          </div>
        </li>
      </ul>
    </div>
  </nav>

Answer 2

Вы можете настроить его с помощью top.

.dropdown-menu {
    position: absolute;
    top: 59px;
}