navbar - 如何使这个导航栏内联

Question

每个项目的文本都很长，这是不允许导航栏内联的问题，我正在使用引导程序 4

标签： navbar

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>

您可以为每个导航链接添加一个工具提示，其中包含文本。