代码之家  ›  专栏  ›  技术社区  ›  Harun Anwar

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

  •  1
  • Harun Anwar  · 技术社区  · 7 年前

    这是我的标题。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>
    
    3 回复  |  直到 7 年前
        1
  •  2
  •   Nandita Sharma    7 年前

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

        2
  •  0
  •   bigwolk    7 年前

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

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

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

        3
  •  0
  •   Shivansh Rajolia - HeLleR    7 年前

    不包括引导的脚本标记。Bootstrap需要javascript来运行其中一些动画。因此,请包含一个引导脚本标记。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>