Как сделать этот Navbar встроенным

Question

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

Answer 1

Может быть, вы найдете это полезным:

.navbar-nav{display:flex;
  list-style:none;
  margin:0;
  padding:0;
  width:100%;
  }
.nav-item{
  padding:.5em 1em; 
  flex:0 1 25%;
  border:1px solid;
  min-width: 0;
}
.nav-link{
  width:99%;
  display:block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border:1px solid red;
}

 <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Long long description of this link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          Dropdown
        </a>

      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Test</a>
      </li>
    </ul>

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