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 Responsive Utilities轻松实现此目的。 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在移动设备上合并多个导航栏

2 个答案: