css - 甚至 Bootstrap Nav Tabs 和 Dropdown？

Question

我这里有以下 JS Fiddle 作为例子:

原始 JS fiddle :

https://jsfiddle.net/dnovdk47/3/

我试图让导航合理，即使是选项卡也能填满整个导航菜单的相等空间。我的另一个问题是我需要使下拉菜单宽度和选项卡宽度相同，以便在打开时下拉菜单与选项卡对齐。我能够通过将 ul 下拉列表的宽度设置为 100% 并使用 flex 来实现这一点

JS Fiddle with Justified Nav:

https://jsfiddle.net/dnovdk47/5/

CSS

.nav {
  display: flex;
  width: 100%;
}

.nav li {
  background-color: #e3e3e3;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 100%;
}

.navbar-inverse .navbar-nav li > a {
  height: 45px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.navbar-inverse .navbar-nav li ul {
  width: 100%;
}

但是，在 Fundamentals 选项卡上，下拉文本更大/太宽，超出了框的范围。

我想要的是选项卡是否可以等于下拉菜单的宽度。如果它不可行，那么对于超长文本/元素，可能只是将文本换行到第二行。

这是我试图使所有选项卡和下拉菜单实现均匀动态的图片。

Answer 1

您可以将以下 css 添加到下拉列表 li 以将文本分成多行。

.dropdown-menu>li>a{
  word-wrap: break-word;
  white-space: inherit;
  text-align: center;
}

JSFiddle:https://jsfiddle.net/dnovdk47/10/