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

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

<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
            <a class="navbar-brand" href="index.html">Brand Name</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                  </a>
                  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                  </div>
                </li>                
              </ul>
            </div>
          </nav>

В приведенном выше коде я хочу, чтобы элементы с классом dropdown-item отображались рядом друг с другом. Я использовал приведенный выше код с сайта начальной загрузки, версия 4.3.1.