Выровняйте выпадающие элементы navbar рядом

Question

Я пытаюсь выровнять свои выпадающие элементы, сделанные с помощью Bootstrap 4 рядом друг с другом, как это:

Где пункт 1 и 2 являются выпадающими элементами при наведении на первый элемент теста.

Я пытался использовать float: left в CSS, но, к сожалению, это не сработало. Любые предложения высоко ценятся.

Но сейчас они находятся под друг другом, как это:

<div class="collapse navbar-collapse" id="navbarToggler">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item dropdown">
                <a class="nav-link" href="javascript:void(0)" id="NavbarToggler">Welkom</a>
                <div class="dropdown-menu" aria-labelledby="NavbarToggler">
                    <a class="dropdown-item mt-2" href="info">Informatie Stedenband</a>
                    <a class="dropdown-item" href="geschiedenis">Geschiedenis Stedenband</a>
                </div>
            </li>
</div>

Answer 1

Если вы хотите выровнять выпадающие элементы рядом, используйте этот код

.dropdown-menu a{
  display:inline;
  padding:5px;
}

ИЛИ

, если вы хотите выровнять выпадающие элементы построчно, используйте этот код

.dropdown-menu a{
  display:block;
  padding:5px;
}

Answer 2

Используйте d-inline-block и w-auto классы с выпадающим элементом