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

Question

我使用 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>

它在大屏幕上完美运行，但在移动设备上运行不佳。任何使其对移动设备可见的 bootstrap。

笔记本电脑视图

手机浏览

Answer 1

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

这里提到了新旧class的对比；

尝试使用visible-xs;

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

或d-block d-sm-none

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

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

How to show Navigation bar in Mobile View?

html

css

responsive-design

bootstrap-4

responsive