引导崩溃显示在旁边不是下面

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属性。试着明确说明：两者;在下拉div #categories。