如何在小屏幕上将引导导航标签显示为可折叠按钮？
[英]How to show bootstrap nav-tabs as a collapsible button on the small screens?
问题描述
I'm building single page app that should be responsive on all devices. 
我正在构建应在所有设备上响应的单页应用程序。 So far everything works fine but there is one thing that caught my eye. 到目前为止，一切正常，但是有一件事引起了我的注意。 The tabs on the home screen show horizontally when lg and md screen size. lg和md屏幕大小时，主屏幕上的选项卡水平显示。 If I turn on Responsive Design Mode in the browser they show vertically. 如果在浏览器中打开“ Responsive Design Mode ，它们将垂直显示。 That presentation takes a lot of space on the screen. 该演示文稿在屏幕上占用了大量空间。 I'm wondering if they can be displayed as a collapsible button where user can click and choose the tab? 我想知道它们是否可以显示为可折叠的按钮，用户可以在其中单击并选择选项卡？ That would save some space on the screen and definitely look nicer. 这样可以节省屏幕空间，看起来也更好。 Here is example of what I have so far: 这是到目前为止我所拥有的示例：
.navbar-brand { padding: 0px; } .navbar-brand>img { height: 100%; min-height: 45px; padding: 5px; width: auto; } .brand2 { height: 100%; height: 50px; padding: 5px; margin-left: 5px; width: auto; display: block; } .my-jumbotron { padding-top: 45px; padding-bottom: 10px; margin-bottom: 5px; background-color: #333; color: #fff; } .page-footer { margin-bottom: 5px; background-color: #333; border-radius: 6px; padding: 5px; color: #fff; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Single Page Application</title> <link rel="icon" type="image/x-icon" href="images/favicon.ico" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="row"> <div class="col-xs-4 col-sm-6"> <a class="navbar-brand" data-toggle="tooltip" data-placement="top" title="MyApp home page" href="https://www.example.com" target="_blank"><img class="img-rounded" src="images/logo.png" alt="MyApp" /></a> </div> <div class="col-xs-4 col-md-6"> <img class="img-rounded brand2" src="images/app.jpg" alt="Img" /> </div> </div> </div> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="nav navbar-nav" id="nav_menu"> <li><a href="#" data-id="home">Home</a></li> <li><a href="#" data-id="contact">Contact</a></li> <li><a href="#" data-id="help">Help</a></li> </ul> </div> </div> </nav> <div class="container"> <div class="jumbotron my-jumbotron"> <h2>Single Page Application</h2> </div> <div id="main_container"> <ul class="nav nav-tabs nav-justified"> <li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li> <li><a data-toggle="tab" href="#tab2">Tab 2</a></li> <li><a data-toggle="tab" href="#tab3">Tab 3</a></li> <li><a data-toggle="tab" href="#tab4">Tab 4</a></li> </ul> <div class="tab-content"> <div id="tab1" class="tab-pane my-tab-pane fade in active"> <h3>Tab 1</h3> <p>Show tab 1.</p> </div> <div id="tab2" class="tab-pane my-tab-pane fade"> <h3>Tab 2</h3> <p>Show tab 2.</p> </div> <div id="tab3" class="tab-pane my-tab-pane fade"> <h3>Tab 3</h3> <p>Show tab 3.</p> </div> <div id="tab4" class="tab-pane my-tab-pane fade"> <h3>Tab 4</h3> <p>Show tab 4.</p> </div> </div> <div class="row"> <div class="col-sm-12"> <footer class="page-footer"> <div class="container-fluid"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2"> <a href="http://example1.com" data-toggle="tooltip" data-placement="top" title="example1.com">Example1.com</a> </div> <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2"> <a href="http://example2.com/" data-toggle="tooltip" data-placement="top" title="example2.com">Example2.com</a> </div> <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2"> <a href="http://example3.com/" data-toggle="tooltip" data-placement="top" title="example3.com">Example3.com</a> </div> <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2"> <a href="http://example4.com/" data-toggle="tooltip" data-placement="top" title="example4.com">Example4.com</a> </div> </div> </div> </footer> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>
If you check the example above you will see tabs on top of each other. 如果您查看上面的示例，您将看到标签彼此重叠。 If you take a look in the upper right corner you will see button that you can click on. 如果您在右上角看一看，将看到可以单击的按钮。 Then you will get list of items in the menu Home , Contact or Help . 然后，您将在“ Home ，“ Contact或“ Help ”菜单中获得项目列表。 I would like to have something similar for the tabs on the small screen. 我希望小屏幕上的标签具有类似的内容。 If someone knows a good way to achieve that please let me know. 如果有人知道实现此目标的好方法，请告诉我。
1 个解决方案
解决方案1
0 2018-12-19 13:57:10
Hopefully this will be helpful. 希望这会有所帮助。 I made a fiddle just of your nav tabs 我只是在你的导航标签上摆了个小提琴
https://jsfiddle.net/nk7wp0m8/4/ https://jsfiddle.net/nk7wp0m8/4/
@media only screen and (max-width:800px) {
.nav-tabs.nav-justified>li {
float: left;
width: 25%;
}
}
If you were to determine the width that your page has them start stacking on then you could use the above media query and force them to all display beside one another. 如果要确定页面开始堆叠的宽度，则可以使用上述媒体查询并将其强制显示为彼此相邻。
EDIT 编辑
https://jsfiddle.net/7cL126q9/ https://jsfiddle.net/7cL126q9/
This fiddle gives you a display like your navigation with the home, contact etc. 该小提琴会为您显示诸如导航房屋，联系人等的显示。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.