html - bootstrap 下拉菜单使用 flexbox 和 space-between 内容来填充空间

Question

我想在导航栏的下拉菜单中有两个侧边菜单。为了实现这一点，我想使用 flexbox。然而，文字是环绕的，我希望它们不要环绕，而是增长以适应内容的宽度。

提示:您需要扩展 fiddle 的渲染宽度以避免 Bootstrap 崩溃。 fiddle

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <div class="flex-container">
              <div>
                <li><a href="#">Left Side</a></li>
                <li><a href="#">Longer content on the left side</a></li>
              </div>
              <div>
                <li><a href="#">Log In</a></li>
                <li><a href="#">Sign Up</a></li>
              </div>
            </div>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

.flex-container {
  display: flex;
  justify-content: space-between;
}

Answer 1

我找到了答案 here .我希望避免设置固定的最小宽度

.dropdown-menu > li > a {
    white-space: nowrap;
}