導航欄引導菜單未在移動設備中顯示
[英]Navbar bootstrap menu not showing in mobile
問題描述
這是我的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>
3 個解決方案
解決方案1
1 2018-04-19 07:09:16
從中刪除類“崩潰”
<div class="collapse navbar-collapse" id="navbarColor01">
要創建可折疊的導航欄，請使用帶有class =“ navbar-toggle”，data-toggle =“ collapse”和data-target =“＃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>
另外，您還必須包括bootstrap的js。
解決方案2
0 已采納 2018-04-19 07:10:43
您的導航欄已隱藏。 添加一些按鈕（漢堡包），該按鈕將顯示您的導航欄：
<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 2018-04-19 07:14:04
引導腳本標簽不包括在內。 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>
Wordpress菜單+ Bootstrap NavBar
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.