针对不同设备的不同导航栏订购

Question

我想对移动设备中的导航栏进行反向排序。为此，我定义了2 div：一个用于xs设备，另一个用于小型设备。但是，当前的代码不起作用。我究竟做错了什么？

<nav class="navbar navbar-custom navbar-fixed-top" role="navigation"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-my-collapse"> 
         <i class="fa fa-bars"></i> 
        </button> 
        <a class="navbar-brand page-scroll" href="#page-top"> 
         <i class="fa fa-user-md"></i> 
        </a> 
       </div> 

<!-- sm-up devices devices -->     
       <div class="collapse navbar-collapse navbar-right navbar-my-collapse hidden-sm-up"> 
        <ul class="nav navbar-nav navbar-right"> 
         <li class="hidden"> 
          <a href="#page-top"></a> 
         </li> 

         <li> 
          <a class="page-scroll" href="#contact">Item1</a> 
         </li> 
         <li> 
          <a class="page-scroll" href="#download">Item2</a> 
         </li> 

        </ul> 
       </div> 

<!-- xs devices -->     
       <div class="collapse navbar-collapse navbar-right navbar-main-collapse hidden-xs"> 
        <ul class="nav navbar-nav navbar-right"> 
         <li class="hidden"> 
          <a href="#page-top"></a> 
         </li> 

         <li> 
          <a class="page-scroll" href="#contact">Item2</a> 
         </li> 
         <li> 
          <a class="page-scroll" href="#download">Item1</a> 
         </li> 

        </ul> 
       </div> 
       <!-- /.navbar-collapse --> 
      </div> 
      <!-- /.container --> 
     </nav> 

目前，它适用于xs设备，但对于其他尺寸，我看到两个navbars！

Answer 1

删除所有collapse navbar-collapse navbar-right类。 还包括所有hidden-sm hidden-md hidden-lg hidden-xl类到您的navbar-my-collapse股份，看看它是否有效

Answer 2

在sm-collapse上，您需要类.hidden-xs，而在xs-collapse上，您需要类.visible-xs-block。

这样，sm-collapse将隐藏在xs设备上，而xs-collapse只会在xs设备上呈现。