使用 Bootstrap 3 在移动设备上合并多个导航栏

Question

这是我的源代码：

    <nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Navbar 1</a></li>
            </ul>
        </div>
    </div>
</nav>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel placerat lacus. In at ipsum ex. Phasellus vitae molestie tortor. Praesent venenatis odio mi, quis ullamcorper felis lobortis vel. Donec sed ipsum interdum, ullamcorper mauris nec, blandit libero. Aenean lacinia ante aliquam ligula posuere hendrerit. Pellentesque tincidunt augue quis rhoncus accumsan. Pellentesque fermentum nisl a urna dictum placerat. Aenean iaculis id nisi sit amet pellentesque. In leo ligula, accumsan posuere pellentesque eu, egestas sit amet nunc. Duis id odio varius, volutpat nisi quis, bibendum felis. Interdum et malesuada fames ac ante ipsum primis in faucibus.

<div class="collapse navbar-collapse bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Navbar 2</a></li>
    </ul>
</div>

有没有办法在移动设备上合并 2 个导航栏，但在桌面上将它们分开？

Answer 1

试试这个代码。我使用媒体查询根据屏幕大小显示和隐藏网格。示例 http://www.bootply.com/N9cskeuHWl

  <style>
    @media screen and (max-width: 700px) {
  .col-md-12{
    display:none;
   }
   }
     @media screen and (min-width: 700px) {
   .col-xs-12{
    display:none;
   }
   }

  </style>

  <nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" 
   data-toggle="collapse" data-target=".bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
            <div class="col-md-12">
            <li><a href="#">Navbar 1</a></li>
            </div>
            <div class="col-xs-12">
                <li><a href="#">Navbar 1</a></li>
                   <li><a href="#">Navbar 2</a></li>

            </div>
        </ul>
      </div>
   </div>
   </nav>
       <p>You Content</p>                                                                     
    <div class="collapse navbar-collapse bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-right">
   <div class="col-md-12">
     <li><a href="#">Navbar 2</a></li>
   </div> 
   </ul>
  </div>

Answer 2

对于遇到此问题的任何人。您可以使用 Bootstrap 响应实用程序轻松实现这一目标。 https://getbootstrap.com/docs/3.3/css/#responsive-utilities

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Navbar 1</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right visible-xs-block">
                <li><a href="#">Navbar 2</a></li>
            </ul>
        </div>
    </div>
</nav>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel placerat lacus. In at ipsum ex. Phasellus vitae molestie tortor. Praesent venenatis odio mi, quis ullamcorper felis lobortis vel. Donec sed ipsum interdum, ullamcorper mauris nec, blandit libero. Aenean lacinia ante aliquam ligula posuere hendrerit. Pellentesque tincidunt augue quis rhoncus accumsan. Pellentesque fermentum nisl a urna dictum placerat. Aenean iaculis id nisi sit amet pellentesque. In leo ligula, accumsan posuere pellentesque eu, egestas sit amet nunc. Duis id odio varius, volutpat nisi quis, bibendum felis. Interdum et malesuada fames ac ante ipsum primis in faucibus.

<div class="collapse navbar-collapse bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Navbar 2</a></li>
    </ul>
</div>

使用 Bootstrap 3 在移动设备上合并多个导航栏

Merge multiple navbar on mobile devices using Bootstrap 3

twitter-bootstrap

twitter-bootstrap-3