引导程序崩溃显示旁边不低于

Question

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

的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

这可能是因为您不知道的一些引导程序声明而发生的。它看起来像按钮（.pull-left.categories）包装器具有float left属性。尝试声明清楚：两者;在下拉div #categories。