Bootstrap 4使导航栏项目始终在小屏幕上扩展且没有按钮
[英]Bootstrap 4 to have navbar items allways expanded on small screen with no button
问题描述
I am working on a website footer, and am looking for a way to make a nav that has all it's items in one row on a large screen, and collapsed to many rows on a smaller screen. 
我正在网站脚注上工作，正在寻找一种制作导航器的方法，该导航器将所有物品在大屏幕上排成一排，然后在小屏幕上折叠成多排。 The collapsing happens just fine, but I cannot figure out a way to: 崩溃发生的很好，但是我无法找出一种方法来：
a) automatically show the rows and not have them hidden until the toggle button is hit a）自动显示行，直到单击切换按钮时才隐藏行
b) eliminate the toggle button all together b）完全消除切换按钮
My current code: 我当前的代码：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> <nav class="navbar navbar-dark bg-dark navbar-expand-xl py-0" id="footerBar"> <div class="collapse navbar-collapse" id="navbarColor03"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#" target="_blank">link1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">link2</a> </li> </ul> </div> </nav>
Currently, this just collapses into nothing without a button (obviously because I have removed it). 目前，没有按钮就无法折叠（显然是因为我已将其删除）。 Is there an easy way to make it default to expanded on smaller screens? 有没有一种简单的方法可以使其默认扩展到较小的屏幕？
1 个解决方案
解决方案1
0 已采纳 2017-11-26 16:03:48
Figured it out... 弄清楚了...
Needed the "show" class applied to the collapse (the div with id navbarColor03 ). 需要将“ show”类应用于折叠（ID为navbarColor03的div）。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> <nav class="navbar navbar-dark bg-dark navbar-expand-xl py-0" id="footerBar"> <div class="collapse navbar-collapse show" id="navbarColor03"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#" target="_blank">link1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">link2</a> </li> </ul> </div> </nav>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.