不同设备的不同导航栏排序

Question

我想在移动设备上对我的导航栏进行反向排序。为此，我定义了 2 个 divs：一个用于 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 设备，但对于其他尺寸，我看到两个导航栏！

Answer 1

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

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

Answer 2

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

不同设备的不同导航栏排序

Different navbar ordering for different devices

navbar

twitter-bootstrap

twitter-bootstrap-3