如何在小屏幕上將引導導航標簽顯示為可折疊按鈕？

Question

我正在構建應在所有設備上響應的單頁應用程序。 到目前為止，一切正常，但是有一件事引起了我的注意。 lg和md屏幕大小時，主屏幕上的選項卡水平顯示。 如果在瀏覽器中打開“ Responsive Design Mode ，它們將垂直顯示。 該演示文稿在屏幕上占用了大量空間。 我想知道它們是否可以顯示為可折疊的按鈕，用戶可以在其中單擊並選擇選項卡？ 這樣可以節省屏幕空間，看起來也更好。 這是到目前為止我所擁有的示例：

 .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>

如果您查看上面的示例，您將看到標簽彼此重疊。 如果您在右上角看一看，將看到可以單擊的按鈕。 然后，您將在“ Home ，“ Contact或“ Help ”菜單中獲得項目列表。 我希望小屏幕上的標簽具有類似的內容。 如果有人知道實現此目標的好方法，請告訴我。

Answer 1

希望這會有所幫助。 我只是在你的導航標簽上擺了個小提琴

https://jsfiddle.net/nk7wp0m8/4/

@media only screen and (max-width:800px) {
  .nav-tabs.nav-justified>li {
    float: left;
    width: 25%;
  }
}

如果要確定頁面開始堆疊的寬度，則可以使用上述媒體查詢並將其強制顯示為彼此相鄰。

編輯

https://jsfiddle.net/7cL126q9/

該小提琴會為您顯示諸如導航房屋，聯系人等的顯示。

如何在小屏幕上將引導導航標簽顯示為可折疊按鈕？

問題描述

1 個解決方案

解決方案1
0 2018-12-19 13:57:10

如何在小屏幕上將引導導航標簽顯示為可折疊按鈕？

問題描述

1 個解決方案

解決方案1 0 2018-12-19 13:57:10

解決方案1
0 2018-12-19 13:57:10