Элементы рушатся в navtrab bootstrap4, даже когда не требуется

Question

Я недавно пытался создать подобный интерфейс WhatsApp с помощью bootstrap. Так что я использовал Bootstrap Navbar. И он работает нормально. Но когда я изменяю размер окна, содержимое панели навигации выходит на новую строку, я хочу ограничить это. Например, «Статус» имеет точку с ним. При изменении размера окна точка перемещается на следующую строку. Как я могу ограничить это (попробуйте 867 x 811)

Вот ссылка Практика интерфейса WhatsApp Посмотрите на скриншот.

А вот мой код для навигации:

Whatsapp

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link active" href="index.html">Chats

                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="status.html">Status
                    <i class="material-icons" style="font-size: 11px;">brightness_1</i>
                </a>

            </li>
            <li class="nav-item">
                <a class="nav-link" href="calls.html">Calls</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">
                    More
                </a>
                <div class="dropdown-menu" id="moreOptions">
                    <a class="dropdown-item disabled" href="#">New group</a>
                    <a class="dropdown-item disabled" href="#">New broadcast</a>
                    <a class="dropdown-item disabled" href="#">WhatsApp Web</a>
                    <a class="dropdown-item disabled" href="#">Starred messages</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="profilePage.html">Settings</a>
                </div>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn my-2 my-sm-0 mr-sm-2" type="submit">Search</button>
        </form>

    </div>
</nav>

Answer 1

Вы должны изменить некоторые из CSS

@media(max-width:991px){
   .navbar-nav > li {
      padding-left: 10px;
      padding-right: 10px;
    }
   .navbar-dark .navbar-nav .nav-link {
      padding-left: 0px;
      padding-right: 0px;
    }
  }