간단한 부트 스트랩 navbar가 모바일에서 붕괴하지 않는다

아마도 내가 누락되었거나 이해하지 못했지만, 가능한 모든 것을 시도한 결과가 같았습니다.간단한 부트 스트랩 navbar가 모바일에서 붕괴하지 않는다

나는 단순히 반응 네비게이션 바의 example from w3schools했다 지점으로 내 페이지를 아래로 무식하게 한

내 문제. 브라우저 창 크기를 조정할 때 navbar가 축소됩니다. In my JSFIDDLE 내비게이션 막대가 접히지 않고 휴대 기기에 연결되자 마자 처럼 내비게이션 막대가 접히는 경우 ... 내가 뭘 잘못하고 있니?

BROWSER가 정상적으로 작동 크기를 조정

브라우저의 크기를 조정!

Mobile 장치

모바일 장치를 작동하지 않는 이유는 무엇입니까? 내가 뭘 잘못 했니? 여기에 당신은 당신의 코드에서 뷰포트 태그가없는 것으로 보인다 link to my JSFIDDLE

<head> 
    <script 
     src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" > 
    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" > 
    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" </script> 
</head> 

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">WebSiteName</a> 
    </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Page 1</a></li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
     <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
     </ul> 
    </div> 
    </div> 
</nav>

출처

2017-03-14 Marilee

모바일 브라우저의 너비는 얼마입니까? 어쩌면 그 행동의 이유는'navbar '가 아직 휴대 기기에서 중단 점에 도달하지 않았다는 것입니다. – Swellar

이며, 이중 코드를 확인하고 다음 코드를 추가 할 경우, 가능한 뷰포트 태그가 있는지 확인하십시오

<meta name="viewport" content="width=device-width, initial-scale=1">

을 그 작은 폭으로 크기를 조정할 때 JSFiddle 예는 잘 작동

출처

2017-03-14 04:30:09

NOOOO ... 지금 바보 같고 2 시간 동안 디버깅하는 데 시간이 많이 걸리고 간단히 메타 태그를 놓친 것 같습니다. DOH! 시간이 만료되면 수락합니다. 고맙습니다! – Marilee

노력이 하나

<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, manimum-scale=1.0, maximum-scale=1.0" />

출처

2017-03-14 04:43:34

간단한 부트 스트랩 navbar가 모바일에서 붕괴하지 않는다

답변

관련 문제