Bootstrap下拉导航菜单项目换行（wordpress）

Question

无法获取“LEARN”下的子菜单项进行换行（文章/视频）。 influentagency.com/clients/cgc_build_062117

我已经粘贴了一些我的SASS代码，尝试了不同的东西，但似乎没有任何效果。添加了wp_bootstrap_navwalker函数，尝试添加类，无论我尝试什么都不包装。

我在这里缺少什么想法？提前致谢！

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
    color: #fff;
    text-decoration: none;
    outline: 0;
    background-color: #777; 
   
}

.dropdown-menu {
     flex-wrap: wrap;
}



.navbar{
    border-radius: 0;
    webkit-border-radius: 0;
    min-height: 1px;
    margin-bottom: 0;
    &.navbar-default {
        border: none;
        background: #fff;
        padding: 0 15px;
        #navbar-menu{
            float: right;
            &.navbar-collapse{
                padding: 0;
                margin: 0;
                .navbar-nav{
                    float: none;
                    margin: 0;
                    padding: 0;
                    li{
                        display: inline-block;
                        float: none;
                        margin: 23px 0 0 0px;
                        a {
                            color: #333;
                            font-size: 14px;
                            display: block;
                            text-decoration: none;
                            @include OpenSansSemiBold;
                            padding: 4px 8px;
                            &:hover{
                                color: #9dcb94;
                            }
                        }
                        &.item-right{
                            margin-left: 25px;
                            a{
                                background: $green;
                                color: #fff;
                                border-radius: 2px;
                                padding: 10px 14px;
                                &:hover{
                                    background: $green_hover;
                                }
                            }
                            &.current-menu-item,
                            &.current_page_item,
                            &.current-menu-ancestor,
                            &.current-page-ancestor {
                                a{
                                    color: #fff;
                                }
                            }
                        }
                        &.current-menu-item,
                        &.current_page_item,
                        &.current-menu-ancestor,
                        &.current-page-ancestor {
                            a{
                                color: $green;
                            }
                        }
                        .sub-menu{
                            display: none;
                        }
                    }
                }
            }
        }
    }

Answer 1

问题是你的css正在制作所有菜单项display-inline，甚至是下拉菜单中的

.navbar.navbar-default #navbar-menu.navbar-collapse .navbar-nav li{
    display: inline-block;
    /* other styles here also */
}

您需要在css中包含以下内容以覆盖它：

.navbar.navbar-default #navbar-menu.navbar-collapse .navbar-nav .dropdown-menu li{
     display:block;

}

为此，您需要将以下内容添加到SASS中：

.navbar-nav{
    [...]
    li{
        display: inline-block;
        [...]
    }
    .dropdown-menu li { display:block;}
 }