如何使滚动折叠导航navbar-fixed-top？

Question

How to make scrolling collapsing navigation navbar-fixed-top bootstrap4 ? 如何使滚动折叠导航navbar-fixed-top bootstrap4 ？

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.3/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <nav class="navbar navbar-fixed-top navbar-light bg-faded"> <div class="container"> <a class="navbar-brand" href="#">Fixed top</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation"> &#9776; </button> <div class="collapse" id="exCollapsingNavbar"> <div class="pa-1"> <ul class="nav navbar-nav nav-pills nav-stacked"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> </div> </div> </nav> </div> </body> </html>

Answer 1

In 4 alpha you to add some CSS to make the navbar stack vertically when collapse like 3.x.. 在4 alpha中你添加一些CSS，以便在像3.x一样折叠时垂直地使用导航栏。

.navbar .navbar-nav>.nav-item {
    float: none;
    margin-left: .1rem;
}
.navbar .navbar-nav {
    float:none !important;
    max-height: 240px;
    overflow: auto;
}
.navbar .collapse.in, .navbar .collapsing  {
    clear:both;
}

Demo: http://www.codeply.com/go/zeSsTQr8S9 演示： http ： //www.codeply.com/go/zeSsTQr8S9

如何使滚动折叠导航navbar-fixed-top？

问题描述

1 个解决方案

解决方案1
3 已采纳 2016-09-12 11:02:38

如何使滚动折叠导航navbar-fixed-top？

问题描述

1 个解决方案

解决方案1 3 已采纳 2016-09-12 11:02:38

解决方案1
3 已采纳 2016-09-12 11:02:38