如何使此导航栏内联

Question

the text of each item is long that is the problem who not allowed the navbar inline and I m using bootstrap 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>

您可以为每个带有文本的导航链接添加工具提示。