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

Posted

技术标签:

【中文标题】导航栏引导菜单未在移动设备中显示【英文标题】:Navbar bootstrap menu not showing in mobile 【发布时间】:2018-09-29 13:53:19 【问题描述】:

这是我的 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>

【问题讨论】:

【参考方案1】:

中删除类“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>

您还必须包含引导程序的 js。

【讨论】:

【参考方案2】:

您的导航栏已隐藏。添加一些按钮(汉堡包),它将显示您的导航栏:

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

把它和你的ul放在div之前。这个代码示例来自我的项目 - 当然你必须根据你的项目调整类。

【讨论】:

【参考方案3】:

不包括 bootstrap 的脚本标签。 Bootstrap 需要 javascript 来运行其中一些动画。所以包括 bootstrap.min.js 的脚本标签,还包括 jquery.min.js 和 jquery UI,因为一些动画使用这些。这是上面提到的脚本标签。快乐编码:)

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

【讨论】:

以上是关于导航栏引导菜单未在移动设备中显示的主要内容,如果未能解决你的问题,请参考以下文章

汉堡菜单未在移动设备上显示

在移动设备中查看时带有侧边栏的 Bootstrap 导航栏

向移动视图上的引导导航栏切换按钮添加文本提示

引导导航栏折叠未在单击时关闭

引导滑块未在 iphone 6、移动设备上显示工具提示

使用移动设备大小的菜单按钮后,导航栏消失(在全尺寸窗口中)