2016-08-25 1 views
0

나는 많은 링크/옵션이있는 네비게이션 바있다 : 나는 그것을 붕괴 때 enter image description here부트 스트랩 3 : 화면 아래에 다른 접힌 Navbar 링크를 가져 오는 방법은 무엇입니까? 나는 그림에서 <a href="https://i.stack.imgur.com/CH2R0.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CH2R0.jpg" alt="enter image description here"></a></p> <p>을 :

는 일부 옵션이 화면 밖으로 완전히 있습니다을 나는 그들에 클릭 할 수 없습니다 링크 4는 볼 수 있지만 링크 5 및 링크 6은 볼 수 없습니다.

드롭 다운 메뉴를 사용하면 똑같은 작업을 수행 할 수 있습니다.

.navbar { 
 
\t border: 0; 
 
\t border-bottom: 1px solid #FFF; 
 
\t background-color: #111 !important; 
 
\t border-radius: 0px; 
 
} 
 

 

 
/* Adjust Toggle button */ 
 

 
.navbar-toggle { 
 
\t margin-top: 18px; 
 
} 
 

 

 
/* Adjust Navbar Height */ 
 

 
.navbar-brand, 
 
.navbar-nav li a { 
 
\t padding-top: 0; 
 
} 
 

 
.navbar-brand, 
 
.navbar-nav li a { 
 
\t color: #FFF !important; 
 
\t line-height: 70px; 
 
\t height: 70px; 
 
} 
 

 
.navbar-brand { 
 
\t color: #0CF !important; 
 
} 
 

 
.navbar-brand:hover, 
 
.navbar-nav li a:hover { 
 
\t background-color: #06C !important; 
 
\t color: #0f9 !important; 
 
} 
 

 
.dropdown-menu > li > a { 
 
\t line-height: 40px; 
 
\t height: 40px; 
 
} 
 

 
.navbar-nav .open .dropdown-toggle { 
 
\t background-color: #222 !important; 
 
} 
 

 
.navbar div ul li .dropdown-menu { 
 
\t background-color: #222; 
 
\t border-top: 2px solid #09f; 
 
} 
 

 
/* Nav Affix */ 
 
nav.affix { 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    z-index:10; 
 
} 
 
.affix + .container { 
 
\t padding-top: 90px; 
 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>. 
 

 
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="308"> 
 
\t \t <div class="container"> 
 
\t \t \t <div class="navbar-header"> 
 
\t \t \t \t <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
\t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t </button> 
 
\t \t \t \t <a class="navbar-brand" href="#"> 
 
\t \t \t \t \t <i class="fa fa-adjust" aria-hidden="true"></i> 
 
\t \t \t \t \t Brand 
 
\t \t \t \t </a> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <div class="collapse navbar-collapse" id="myNavbar"> 
 
\t \t \t \t <ul class="nav navbar-nav navbar-left"> 
 
\t \t \t \t \t <li><a href="#">Storyline</a></li> 
 
\t \t \t \t \t <li><a href="#">Characters</a></li> 
 
\t \t \t \t \t <li><a href="#">Gallery</a></li> 
 
\t \t \t \t \t <!--li class="dropdown"> 
 
\t \t \t \t \t \t <a class="dropdown-toggle" data-toggle="dropdown" href="#">Misc<span class="caret"></span></a> 
 
\t \t \t \t \t \t <ul class="dropdown-menu"> 
 
\t \t \t \t \t \t \t <li><a href="#">About</a></li> 
 
\t \t \t \t \t \t \t <li><a href="#">Contact</a></li> 
 
\t \t \t \t \t \t \t <li><a href="#">Other</a></li> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </li--> 
 
\t \t \t \t \t <li><a href="#">Link 1</a></li> 
 
\t \t \t \t \t <li><a href="#">Link 2</a></li> 
 
\t \t \t \t \t <li><a href="#">Link 3</a></li> 
 
\t \t \t \t \t <li><a href="#">Link 4</a></li> 
 
\t \t \t \t \t <li><a href="#">Link 5</a></li> 
 
\t \t \t \t \t <li><a href="#">Link 6</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </nav> 
 

 
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>. 
 
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>. 
 
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>. 
 

 

 
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
 
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

+0

모두를위한 공간이 충분하지 않습니다 ... 더 스크롤 하시겠습니까? 그게 효과가 없니? – Aziz

+0

아래로 스크롤하면 화면에서 여전히 링크가 몇 개 있습니다. –

답변

0

뭔가 아마 당신의 자바 스크립트에 문제가 있습니다. .affix-top 클래스가 .navbar .navbar-default에 추가되는 것을 볼 수 있습니다. 그것을 제거하면 내비게이션이 제대로 스크롤됩니다.

+0

내가 사용하는 자바 스크립트 파일은 jQuery와 Bootstrap js입니다. 나는 스크롤바를 사용할 때 Navbar가 화면 상단에 머물러 있기를 원하기 때문에 Affix를 사용합니다. –

+0

글쎄, 그건 당신이 스크롤하는 것을 막고있는 것이다. 어쩌면 javascript 함수를 사용하면 nav이 해당 접사 클래스를 제거하기 위해 열려있는 경우입니다. – Vcasso

+0

navbar 안에 다른 스크롤바를 추가 할 수 있습니까? –