Bootstrap 下拉列表使用Flexbox和Space-between内容填充空间

f87krz0w  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(3)|浏览(166)

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

提示:您需要扩展fiddle的渲染宽度以避免引导崩溃。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;
}
olmpazwi

olmpazwi1#

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

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

7bsow1i62#

您需要在.dropdown-menu上覆盖 Bootstrap 的默认样式,

.dropdown-menu {
  min-width: 300px;
}

希望这对你有帮助。

clj7thdc

clj7thdc3#

仅供参考..您可以通过将Bootstrap 5中提供的“text-nowrap”类应用于ul或div元素来完成此操作。

<ul class="dropdown-menu">
    <div class="flex-container text-nowrap">
      <div>

相关问题