레몬맛사탕
42
2017-07-09 22:46:22
2
961

mean stack small screen 에서 navbar 기능이 작동하지 않습니다.


안녕하세요.


mean stack 으로 프로젝트 구현 중 모바일, small screen 구간에서만

navbar 기능이 제대로 작동하지 않는걸 확인했습니다.


인터넷에서 돌아다니는 예제 코드로 바꿔 보았는데 동작 자체가 안하는것 같습니다.


주소 먼저 참조해드리겠습니다.

https://hidden-falls-42052.herokuapp.com/


다른 예제 코드로 바꿔도 navbar가 적용되지 않는걸 보면 소스코드 문제는 아닌거 같은데,

어느 지점을 포인트 잡아야 할지 모르겠습니다..


소스코드는  아래와 같습니다.

<nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="true" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">MEAN Auth App</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse" aria-expanded="true">
          <ul class="nav navbar-nav navbar-left">
            <li [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}"><a [routerLink]="['/']">Home</a></li>
          </ul>

          <ul class="nav navbar-nav navbar-right">
            <li *ngIf="authService.loggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}"><a [routerLink]="['/dashboard']">Dashboard</a></li>
            <li *ngIf="authService.loggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}"><a [routerLink]="['/profile']">Profile</a></li>

            <li *ngIf="!authService.loggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}"><a [routerLink]="['/login']">Login</a></li>
            <li *ngIf="!authService.loggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}"><a [routerLink]="['/register']">Register</a></li>
            <li *ngIf="authService.loggedIn()"><a (click)="onLogoutClick()" href="#">Logout</a></li>
          </ul>
        </div>
      </div>
    </nav>
0
0
  • 답변 2

  • jslovers
    2k
    2017-07-10 00:46:59

    아마도...?


    1
  • 레몬맛사탕
    42
    2017-07-10 01:07:27 작성 2017-07-10 01:31:36 수정됨

    엇.. 맞습니다!

    아래 코드를 삽입하니 정상 동작 하는걸 확인했습니다.

    감사합니다.!

    <!-- jquery -->
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <!-- [/] jquery -->
    
    <!-- bootstrap -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <!-- [/] bootstrap -->


    크롬에서 F12 눌러서 확인을 해도

    Angular is running in the development mode. Call enbleProdMode(0 to enable the production mode.

    라고 밖에 안뜨는데 어떻게 확인하셨는지 알 수 있을까요??

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.