Bootstrap-Minimierung wird angezeigt neben nicht

Question

Ich benutze Bootstrap-Kollaps, um eine Liste ein-/auszublenden. Die Liste beginnt jedoch neben der Minimierungsschaltfläche und nicht darunter. Siehe das Bild:

Der HTML-Code ist der folgende:

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

Und hier ist mein CSS-Code:

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

Was sollte ich das erwartete Verhalten erhalten tun ?

Answer 1

Dies ist wahrscheinlich passiert, weil einige Bootstrap-Deklaration Sie nicht bewusst sind. Es sieht so aus, als hätte der Wrapper für die Schaltfläche (.pull-left.categories) die Eigenschaft float left. Versuche es klar zu sagen: beides; auf dem Dropdown div # Kategorien.