ブートストラップの折りたたみが横に表示されない

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＃categoryにあります。