2016-12-06 3 views
1

저는 UI 프레임 워크로 부트 스트랩을 사용하고 있습니다. 실제로는 모두 잘 작동하지만 모바일 장치에 반응하는 웹 사이트를 만들어야합니다. 이 작동하지 않는html 응답 가능하지 않음

@media(max-width: 860px) { 
    #header #header-menu .menu-item { 
     min-width: 85px; 
    } 

    #footer #footer-user-display-name { 
     text-align: left; 
    } 
} 

, 해상도 :

<!doctype html> 
<html> 
<head> 
    <title>Website</title> 
    <!-- CSS AND LIBRARY INCLUSION --> 
</head> 

<div id="wrapper"> 

<nav id="header" class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <div id="header-logo" class="navbar-brand"> 
       <span>Website</span> 
      </div> 

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-menu" 
        aria-expanded="false" 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> 
     </div> 


     <div id="header-menu" class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
        <li class="active"> 
         <a href="#" class="menu-item">Home</a> 
        </li> 
        <li class=""> 
         <a href="#" class="menu-item">Login</a> 
        </li> 
        <li class=""> 
         <a href="#" class="menu-item">Help</a> 
        </li> 
      </ul> 
     </div> 
    </div> 
</nav> 

<div id="login-panel" class="frame-container"> 
    <h2>Login</h2> 
    <div class="alert hidden"></div> 
    <form id="login-form"> 
     <div class="form-group"> 
      <label for="username">Username</label> 
      <input type="text" id="username" placeholder="Email" class="form-control" /> 
     </div> 
     <div class="form-group"> 
      <label for="password">Password</label> 
      <input type="password" id="password" placeholder="Password" class="form-control" /> 
     </div> 
     <br> 
     <button type="submit" id="login" class="btn btn-primary">Accedi</button> 
    </form> 
</div> 

</div> <!-- Wrapper --> 

<div id="footer" class="footer"> 
    <div id="footer-container" class="col-xs-12 col-md-6"> 
     Footer (C) 
    </div> 
</div> 

</body> 
</html> 

내가 이런 적어도 머리글과 바닥 글이 반응 만들려고 :

나는 순간이 간단한 구조를했습니다 나도 할 수있어? 당신은 단지 질문의 가장 중요한 부분을 나사

<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
+0

@ManishPatel : –

답변

4

당신이 필수적이다 뷰포트 메타 태그를 추가하는 것을 잊었다. 수정 사항에주의하십시오.
+3

및 열린 태그 – Mate

+1

은 게시물에 대해서만 누락되었습니다. 뷰포트 태그에 대해 기억하지 못했던 점에 대해 감사드립니다. 나는 프로그래밍 세계에 빠져있다. – AgainMe

+0

@Mate Yea, LoL. –

관련 문제