Question

我正在尝试学习如何使用flexbox并让flexbox在Chrome＆amp; Firefox内部的Bootstrap子菜单，但子菜单面板不能正确计算宽度。它几乎从不水平扩展，菜单项只是溢出菜单的边界。在最新版本的IE中查看时，菜单看起来应该可以使用，但在Chrome / Firefox / Opera中不起作用。

这是dx-menu-container-wrap div中多个ul的菜单结构（为简洁起见只显示一个）。

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
    <div class="container-fluid"> <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
      <span class="icon-bar"></span>
    </a>

        <div class="nav-collapse">
            <ul class="nav">
                <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<b class="caret"></b></a>

                    <ul class="dropdown-menu">
                        <li class="dropdown-submenu"> <a href="#">More options</a>

                            <div class="dropdown-menu">
                                <div class="dx-menu-container-wrap">
                                    <ul>
                                        <li>
                                            <p><strong>Category 1</strong>

                                            </p>
                                        </li>

然后CSS是：

.dx-menu-container-wrap {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    flex-grow: 1;
    white-space:nowrap;
    height:400px;
}

我是否需要做一些不同的事情来扩展菜单的宽度以适应Chrome和Firefox中的flexbox容器？

菜单的所需行为：固定高度为400像素，首先从左列开始垂直填充，然后从最左边的位置向右扩展/向外弯曲到其他列。

*适用于IE

http://jsfiddle.net/cjsmith/2287nv0o/9/

Answer 1

您可以尝试在下拉包装中添加最小宽度，如下所示：

.dx-menu-container-wrap {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    flex-grow: 1;
    white-space:nowrap;
    height:400px;
    min-width:300px;
}

这是flexbox下拉列表的最小宽度：http://jsfiddle.net/AndrewL32/2287nv0o/11/

它似乎在Chrome，FF以及IE上运行良好

Chrome和Firefox中的Bootstrap菜单宽度问题中的Flexbox布局

1 个答案: