代码之家 › 专栏 › 技术社区 › espresso_coffee

如何在小屏幕上将引导导航选项卡显示为可折叠按钮?

twitter-bootstrap-3 twitter-bootstrap css html jquery

espresso_coffee · 技术社区 · 6 年前

我正在构建一个在所有设备上都应该响应的单页应用程序。到目前为止一切正常,但有一件事吸引了我的注意。当 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 是的。我想在小屏幕的标签上有类似的东西。如果有人知道一个好的方法来实现这一点,请让我知道。

1 回复 | 直到 6 年前

HisPowerLevelIsOver9000 6 年前

希望这会有帮助。我把你的导航标签弄得乱七八糟的

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/

这个小提琴给你一个显示,像你的导航与家,联系等。