부트 스트랩 메뉴 축소 맞춤 디자인

Question

메뉴를 만들고 CSS로 디자인했습니다. 이제 부트 스트랩으로 반응하도록 노력하고 있습니다. 작은 화면에서 메뉴를 열기 위해 버튼을 클릭 할 때까지 모든 것이 작동하는 것처럼 보일 수 있으므로 메뉴 항목은 가로로 표시되고 세로로 표시되지 않습니다. 또한 메뉴의 배경을 확장하지 않고 기본 콘텐츠로 도련됩니다. 어떻게하면이 두 가지 문제를 해결할 수 있으며 큰 메뉴를 나눌 때 작은 화면의 전체 메뉴를 만들 수 있습니다.

<nav class="center-block text-center menu bg" role="navigation"> 


     <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="glyphicon glyphicon-align-justify"></span> 
     </button> 


     <ul class="main-nav visible-sm-inline-block navbar-collapse collapse"> 
      <li><a href="#home" class="button one active">Home</a></li> 
      <li><a href="#about" class="button two">About</a></li> 
      <li><a href="#galleries" class="button three">Galleries</a></li> 
      <li><a href="#services" class="button four">Services</a></li> 
      <li><a href="#media" class="button five">Media</a></li> 
      <li><a href="#blog" class="button six">Blog</a></li> 
      <li><a href="#contact" class="button seven">Contact</a></li> 
     </ul> 

     </nav> 

고마워요!

Answer 1

여기 해결책이 있습니다. 테스트 & 잘 작동합니다. responsinator.com https://www.dropbox.com/s/65edl33z9iqpxsc/Weddings%20by%20Kathy.rar

Answer 2

에서

<nav role="navigation" class="navbar navbar-default"> 
    <div class="navbar-header"> 
     <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
      <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="navbarCollapse" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#home" class="button one active">Home</a></li> 
      <li><a href="#about" class="button two">About</a></li> 
      <li><a href="#galleries" class="button three">Galleries</a></li> 
      <li><a href="#services" class="button four">Services</a></li> 
      <li><a href="#media" class="button five">Media</a></li> 
      <li><a href="#blog" class="button six">Blog</a></li> 
      <li><a href="#contact" class="button seven">Contact</a></li> 
     </ul> 
    </div> 
</nav> 

확인이를 나는 미디어 쿼리를 사용하고 있어야합니다. 남자는 내가 멍청하다고 느낍니까.