导航栏引导菜单未在移动设备中显示

Question

Here's my header.php When I try it out on my mobile, the navigation bar doesn't work on mobile. 这是我的header.php。当我在手机上试用时，导航栏在手机上不起作用。 all menu properly shown in desktop screen but it doesn't display in tab or mobile. 所有菜单都正确显示在桌面屏幕上，但不会显示在标签页或移动设备中。 here is my code. 这是我的代码。

<!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>

Answer 1

Remove class "collapse" from 从中删除类“崩溃”

<div class="collapse navbar-collapse" id="navbarColor01">

To create a collapsible navigation bar, use a button with class="navbar-toggle", data-toggle="collapse" and data-target="#thetarget". 要创建可折叠的导航栏，请使用带有class =“ navbar-toggle”，data-toggle =“ collapse”和data-target =“＃thetarget”的按钮。 Then wrap the navbar content (links, etc) inside a div element with class="collapse navbar-collapse", followed by an id that matches the data-target of the button: "thetarget" 然后将导航栏内容（链接等）包装在div元素内，并带有class =“ collapse navbar-collapse”，后跟与按钮的数据目标匹配的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>

Also you will have to include bootstrap's js. 另外，您还必须包括bootstrap的js。

Answer 2

Your navbar is hidden. 您的导航栏已隐藏。 Add some button (hamburger) which will show Your navbar: 添加一些按钮（汉堡包），该按钮将显示您的导航栏：

<div class="col-10 text-right d-md-none">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>

Put it before div with yours ul .This code example is from my project - Of course You have to adjust classes to Your project. 将其放在div之前，并将其放在ul之前。此代码示例来自我的项目-当然，您必须根据您的项目调整类。

Answer 3

The script tag for bootstrap is not included. 引导脚本标签不包括在内。 Bootstrap needs the javascript to run some of these animations. Bootstrap需要javascript来运行其中的某些动画。 So include a script tag of bootstrap.min.js and also include jquery.min.js and jquery UI as some animations use these. 因此，请包含bootstrap.min.js的脚本标签，还应包含jquery.min.js和jquery UI，因为某些动画会使用它们。 Here are the above-mentioned script tags. 这是上述脚本标签。 Happy coding :) 快乐的编码:)

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

<script 
src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script
 src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></script>

导航栏引导菜单未在移动设备中显示

问题描述

3 个解决方案

解决方案1
1 2018-04-19 07:09:16

解决方案2
0 已采纳 2018-04-19 07:10:43

解决方案3
0 2018-04-19 07:14:04

导航栏引导菜单未在移动设备中显示

问题描述

3 个解决方案

解决方案1 1 2018-04-19 07:09:16

解决方案2 0 已采纳 2018-04-19 07:10:43

解决方案3 0 2018-04-19 07:14:04

解决方案1
1 2018-04-19 07:09:16

解决方案2
0 已采纳 2018-04-19 07:10:43

解决方案3
0 2018-04-19 07:14:04