我使用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;
}
}
}
}
}
}
我该怎么做才能获得预期的行为?
答案 0 :(得分:1)
这可能是因为你不知道某些bootstrap声明。看起来按钮(.pull-left.categories)包装器具有float left属性。试着明确说明:两者;在下拉div #categories。