나는 많은 링크/옵션이있는 네비게이션 바있다 : 나는 그것을 붕괴 때 부트 스트랩 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>
모두를위한 공간이 충분하지 않습니다 ... 더 스크롤 하시겠습니까? 그게 효과가 없니? – Aziz
아래로 스크롤하면 화면에서 여전히 링크가 몇 개 있습니다. –