html - Bootstrap 折叠显示在旁边而不是下面

Question

我正在使用 bootstrap collapse 来显示/隐藏列表。但是，列表从折叠按钮旁边开始，而不是在下方。看图:

HTML代码如下:

<nav class="mobile-menu">
    <div class="container-fluid">
        <div class="row">
            <div class="pull-left categories-header">
                <a data-toggle="collapse" href="#categories" aria-expanded="false">
                    <span class="material-icons">list</span>
                </a>
            </div>
            <div id="categories" class="collapse">
                <ul>
                    <li ng-repeat="category in ::vm.category">
                        <a href="#">{{category.name}}</a>
                    </li>
                </ul>
            </div>

            <div class="pull-right login">
                <a href="#">
                    <span class="material-icons">person_outline</span>
                </a>
            </div>
        </div>
    </div>
</nav>

这是我的 CSS 代码:

.mobile-menu {
    .row {
        line-height: 50px;
        .categories-header {
            padding-left: 25px;
            span {
                vertical-align: middle;
                color: $color-white;
            }
            span:not(.material-icons) {
                text-transform: uppercase;
            }
        }
        .login {
            position: absolute;
            top: 0;
            right: 0;
            padding-right: 25px;
            span {
                vertical-align: middle;
                color: $color-white;
            }
        }
        #categories {
            ul {
                list-style-type: none;
                li {
                    a {
                        color: #FFF;
                    }
                }
            }
        }
    }
}

我应该怎么做才能获得预期的行为？

Answer 1

这可能是因为一些您不知道的 Bootstrap 声明而发生的。看起来按钮 (.pull-left.categories) 包装器具有 float left 属性。尝试声明 clear: both;在下拉 div #categories 上。