아래에 표시되는 부트 스트랩 붕괴

Question

목록을 표시하거나 숨기려면 부트 스트랩 축소를 사용하고 있습니다. 그러나 목록은 아래가 아닌 축소 버튼 옆에서 시작됩니다.

HTML 코드는 다음과 같습니다 : 이미지를 참조하십시오 내가 예상 동작을 얻기 위해 무엇을해야

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

: 여기

<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 코드 ?

Answer 1

당신이 알지 못하는 부트 스트랩 선언이 있기 때문에 이런 일이 일어날 수 있습니다. 버튼 (.pull-left.categories) 래퍼에 왼쪽 속성이있는 것처럼 보입니다. clear 선언 : 둘 다; 드롭 다운 div #categories.