甚至 Bootstrap 导航选项卡和下拉菜单？答案

【问题标题】：Even Bootstrap Nav Tabs and Dropdown?甚至 Bootstrap 导航选项卡和下拉菜单？
【发布时间】：2017-04-24 00:13:11
【问题描述】：

我这里以下面的 JS Fiddle 为例：

原始 JS 小提琴：

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

JS Fiddle with Justified Nav：

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

但是，在“基本面”选项卡上，下拉文本较大/过宽并且超出了框的范围。

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

这是我想要实现的所有选项卡和下拉菜单甚至动态的图片。

【问题讨论】：

忍不住笑了@“我需要让下拉菜单的宽度和标签的宽度相同”

标签： css twitter-bootstrap twitter-bootstrap-3 flexbox

【解决方案1】：

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

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

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

【讨论】：

谢谢。这是最好的解决方案。