【导航栏四个按钮“首页、推荐。。。“当屏幕小于768px时折叠显示时顺序变了 _响应式】

导航栏四个按钮“首页、推荐。。。“当屏幕小于768px时折叠显示时顺序变了

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(1)

响应式

详细描述

截图

代码

<header>
        <!-- bootstrap折叠导航框架 -->
        <nav class="navbar navbar-default" style="background:#29b078; border-radius: 0;border-color: transparent;">
            <div class="container white-oval">
                <!--去除fluid以使得该行格式和首航一致， Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                        aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#" style="color: white">技能树|修真院</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">


                    <ul class="nav navbar-nav navbar-right" style="text-align: center">
                        <li>
                            <a href="./task8-1.html" style="color: white">关于</a>
                            <div class="pink-row"></div>
                        </li>
                    </ul>

                    <ul class="nav navbar-nav navbar-right" style="text-align: center">
                        <li>
                            <a href="./task8-2.html" style="color: white">职业</a>
                            <div class="pink-row"></div>
                        </li>
                    </ul>

                    <ul class="nav navbar-nav navbar-right" style="text-align: center">
                        <li>
                            <a href="./task8-3.html" style="color: white">推荐</a>
                            <div class="pink-row"></div>
                        </li>
                    </ul>

                    <ul class="nav navbar-nav navbar-right" style="text-align: center">
                        <li>
                            <a href="./task8-1.html" style="color: white">首页</a>
                            <div class="pink-row"></div>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>

        <!-- bootstrap折叠导航框架 -->

    </header>

编辑于2025-04-13

时间排序

热门排序

[散修弟子]JS-1730
0

你这个没用col-xs12是怎么独占一行的啊，用媒体查询嘛，我是用的栅格化布局，没出现你这种情况，flex布局，有个属性是反着来排列的，不知道你是不是这样设置的查看全部>

编辑于2018-05-22

去第页