引导禁用崩溃/切换导航栏上
问题描述:
当窗口调整大小时,如何让我的导航栏不崩溃/切换?我试图加入引导禁用崩溃/切换导航栏上
.collapse{
display: inline-block;
}
我的CSS。有了这个,当窗口被调整大小时,导航栏元素将最终堆叠。我还使用自举4阿尔法6
这里是我的导航栏代码:http://www.bootply.com/mHeWTUSxAM
答
只是代替navbar-toggleable-md
使用navbar-toggleable-xl
。
工作片断
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<nav class="navbar navbar-toggleable-xl navbar-inverse bg-inverse">
<div class="navbar-collapse collapse" id="collapsingNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#menu-toggle" class="nav-link" id="menu-toggle">Menu</a>
</li>
</ul>
<ul class="navbar-nav dropdown dropdown-menu-right ml-auto">
<li class="nav-item ">
<a class="nav-link dropdown-toggle" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">logged in as</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Logout</a>
<a class="dropdown-item" href="#">My Movements</a>
</div>
</li>
</ul>
</div>
</nav>
答
how i did it is by giving .btn.btn-navbar{display:none;}
and by giving .nav-collapse{height:auto}
it worked like this but i believe it is not best solution
referenced to bootstrap 4 documentation you should look into that "Responsive behaviors
导航栏可以利用.navbar-toggler,.navbar崩溃,并.navbar-toggleable- *类当他们的内容在按钮后面崩溃时更改。在与其他实用程序组合,您可以轻松地选择何时显示或隐藏特定的元素。”