2016-08-20 1 views
-1

죄송합니다. 많은 질문을 받았지만 해결 방법 중 아무 것도 제대로 작동하지 않는 것 같습니다. 창 크기를 조정할 때 내 탐색 막대가 멋진 버튼으로 접히지 만, 클릭하면 아무 것도 떨어지지 않습니다. 대부분의 솔루션이 말하지만 여전히 운이 없으므로 jsjquery<head>에 추가했습니다. 모든 빠른 솔루션? http://codepen.io/chiggory/pen/qNwLWq부트 스트랩 Navbar 축소 단추가 브라우저에서 작동하지 않습니다.

HTML :

<head> 
<title>Test</title> 
<meta charset="utf-8" /> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<link rel="stylesheet" type="text/css" href="size.css" media="screen" /> 
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
</head> 

<body> 
<nav class="navbar navbar-default navbar-custom navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <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 class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li class="active"><a href="http://www.thea21campaign.org">A21</a></li> 
     <li class="active"><a href="http://bvhope.blogspot.com">Blog</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li class="active"><a href="learn-more.html">Learn More</a></li> 
     <li class="active"><a href="contact-us.html">Contact Us</a></li> 
     <li class="active"><a href="join-us.html">Calendar of Events</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 

CSS :

.navbar-custom { 
    background-color: #800000; 
    color: white; 
    border-radius: 0; 
} 
.navbar-custom .navbar-nav > li > a { 
    color: #fff; 
} 
.navbar-custom .navbar-nav > .active > a, 
.navbar-nav > .active > a:hover, 
.navbar-nav > .active > a:focus { 
    color: #ffffff; 
    background-color: #800000; 
} 
.navbar-custom .navbar-nav > li > a:hover, 
.nav > li > a:focus { 
    text-decoration: none; 
    background-color: #800000; 
} 
.navbar-custom .navbar-brand { 
    color: #eeeeee; 
} 
.navbar-custom .navbar-toggle { 
    background-color: #eeeeee; 
} 
.navbar-custom .icon-bar { 
    background-color: #800000; 
} 

답변

0

사용

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

대신

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
+0

이런, 정말 고마워! 빨리 바보 같은 질문을하는 것을 멈출 것입니다. –

+0

@ErichSterzing 전혀 아님! 나는 우연히이 문제를 관찰했다. 당신의 질문은 바보가 아닙니다 :) 부주의로 인해 모든 사람이 실수를 저지릅니다. –