我正在使用引导程序折叠来显示/隐藏列表。但是，列表是从折叠按钮旁边开始的，而不是下面。请参见图片：

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;
                    }
                }
            }
        }
    }
}

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