甚至Bootstrap Nav选项卡和下拉列表？

Question

我在这里有以下JS小提琴作为例子：

原创JS小提琴：

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%;
}

但是，在“基础”选项卡上，下拉文本更大/太宽，并且超出了框。

我想要的是标签是否等于下拉列表的宽度。如果它不可行，那么可能只是将文本包装到超长文本/元素的第二行。

这是我想要实现的所有标签和下拉列表甚至是动态的图片。

Answer 1

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

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

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