특정 너비로 ​​부트 스트랩 Navbar 항목을 "hamburger icon"으로 변경하십시오.

Question

그래서 브라우저 창을 충분히 얇게 만든 후에 내 웹 사이트의 navbar 항목을 "햄버거 아이콘"으로 축소하려고했습니다.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<nav id="nav_bar" class="navbar navbar-custom"> 
 
    <a href="index.html" class="navbar-brand">Austin Okray</a> 
 
    <div class="container-fluid"> 
 
    <div class="collapse navbar-collapse" id="navbar"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="ResumeStuff/Resume.pdf" target="_blank">My Resume</a></li> 
 
     <li><a href="pythoncode.html">Python In-browser</a></li> 
 
     <li><a href="fullcode.html">Download Full Code</a></li> 
 
     <li class="dropdown"> 
 
      <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Internet Presence<span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="https://www.linkedin.com/in/austin-okray-7b578a106">LinkedIn</a></li> 
 
      <li><a href="https://twitter.com/austin__okray">Twitter</a></li> 
 
      <li><a href="https://github.com/aokray">Github</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

감사 : 여기 내 HTML입니다!

Answer 1

부트 스트랩을 사용하는 경우 두 개의 navbars를 만들 수 있습니다. 햄버거를 사용하여 숨기거나 표시하는 사람과 눈에 잘 띄는 사람. 햄스터 nav에 클래스 .visible-xs-*으로 태그하고 일반 nav에 클래스 .hidden-xs으로 태그를 지정합니다.

좀 더 정보 : http://getbootstrap.com/css/#responsive-utilities

Answer 2

나는 샘플로 this example을 사용했습니다.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<nav id="nav_bar" class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a href="index.html" class="navbar-brand">Austin Okray</a> 
 
    </div> 
 
    
 
    <div class="collapse navbar-collapse" id="navbar-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="ResumeStuff/Resume.pdf" target="_blank">My Resume</a></li> 
 
     <li><a href="pythoncode.html">Python In-browser</a></li> 
 
     <li><a href="fullcode.html">Download Full Code</a></li> 
 
     <li class="dropdown"> 
 
      <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Internet Presence<span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="https://www.linkedin.com/in/austin-okray-7b578a106">LinkedIn</a></li> 
 
      <li><a href="https://twitter.com/austin__okray">Twitter</a></li> 
 
      <li><a href="https://github.com/aokray">Github</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

:이 코드를 확인하시기 바랍니다