引導程序崩潰顯示旁邊不低於

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。