我使用 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 。
笔记本电脑 View
移动 View
最佳答案
您在问题中包含了标签 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>
关于html - 如何在移动 View 中显示导航栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58948665/