如何在移动视图中显示导航栏？答案

【问题标题】：How to show Navigation bar in Mobile View?如何在移动视图中显示导航栏？
【发布时间】：2019-11-20 15:25:50
【问题描述】：

我使用 HTML 和 PHP 开发了导航栏。但问题是我可以在台式机和笔记本电脑上看到导航栏，但在手机屏幕上看不到。

我的代码是这样的。

<header class="page__header media__img ratio--small">
        <?php include "navigation.php"; ?>

        <div class="nav--sub visible-sm">
            <input type="hidden" name="product_category_id" id="product_category_id" value="<?php echo $_GET["id"]; ?>">
            <ul>
                <?php
                $selectcategory = mysqli_query($conn, "select * from product_category where is_active='1' and is_delete='0'");

                while ($rowcategory = mysqli_fetch_array($selectcategory)) {

                    ?>
                    <li class="<?php if ($_GET['id'] == $rowcategory['product_category_id']) {
                        echo 'selected';
                    } ?>">
                        <a href="product_list.php?id=<?php echo $rowcategory['product_category_id']; ?>"><?php echo $rowcategory['product_category_name']; ?></a>
                    </li>
                    <?php

                }


                ?>

            </ul>
        </div>
     </header>

它在大屏幕上完美运行，但不适用于移动设备。任何使其对移动设备可见的引导程序。

笔记本电脑视图

移动视图

【问题讨论】：

标签： html css bootstrap-4 responsive-design responsive

【解决方案1】：

您在问题中包含标签 bootstrap 4，但 visible-sm 类已在 bootstrap 4 中被替换。如果这是自定义 css，请将其包含在您的问题中。

这里提到了新旧类的比较； Missing visible-** and hidden-** in Bootstrap v4

尝试使用visible-xs;

<div class="nav--sub visible-xs">
...
</div>

或d-block d-sm-none

<div class="nav--sub d-block d-sm-none">
...
</div>

【讨论】：