这是我的 header.php 当我在手机上试用时，导航栏在手机上不起作用。所有菜单均正确显示在桌面屏幕中，但未显示在选项卡或移动设备中。这是我的代码。
<!DOCTYPE html>
<html>
<head>
<title>International Pvt. Ltd.</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.1.0/minty/bootstrap.min.css" rel="stylesheet" integrity="sha384-b8rPE9Kj0lNck6sxWxUIJRCE3IHrqNXF74vcnXKYS/NZPi7WInVsaIKeEjIDpyNt" crossorigin="anonymous">
<link rel="stylesheet" href="#assets/css/style.css">
<script src="https://cdn.ckeditor.com/4.9.1/standard/ckeditor.js">/script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">International</a>
</div>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto" >
<li class="nav-item"><a class="nav-link" href="#">Home</a</li>
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#posts">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="#categories">Categories</a></li>
<?php if(!$this->session->userdata('logged_in')) : ?>
<li class="nav-item"><a class="nav-link" href="#users/login">Login</a></li>
<li class="nav-item"><a class="nav-link" href="#users/register">Register</a></li>
<?php endif; ?>
<?php if($this->session->userdata('logged_in')) : ?>
<li class="nav-item"><a class="nav-link" href="#posts/create">Create Post</a></li>
<li class="nav-item"><a class="nav-link" href="#categories/create">Create Category</a></li>
<li class="nav-item"><a class="nav-link" href="#users/logout">Logout</a></li>
<?php endif; ?>
</ul>
</div>
</div>
</nav>
[...]
</body>
最佳答案
从
中删除类“collapse”<div class="collapse navbar-collapse" id="navbarColor01">
要创建可折叠的导航栏，请使用带有 class="navbar-toggle"、data-toggle="collapse"和 data-target="#thetarget"的按钮。然后将导航栏内容(链接等)包裹在一个带有 class="collapse navbar-collapse"的 div 元素中，后跟一个与按钮的数据目标相匹配的 id:"thetarget"
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
此外，您还必须包含 bootstrap 的 js。
关于php - 导航栏引导菜单未在移动设备中显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49914665/