引导移动菜单切换背景颜色不起作用
[英]bootstrap moblile menu toggle background color not working
问题描述
我试图找出为什么当我使用移动设备或将屏幕调整为小尺寸时，当您按下切换按钮时，链接出现但没有背景颜色？
我正在使用引导程序，有关如何解决此问题的任何想法？
如果您想亲眼看看，请访问https://www.makeyourweb.co.uk/
我脑子里的代码是：
<head>
<script data-ad-client="ca-pub-1761720526329589" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Required meta tags -->
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="lib/typed.js" type="text/javascript"></script>
<script src="assets/demos.js"></script>
<link href="assets/demos.css" rel="stylesheet"/>
<link href="assets/css/contan.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-175922448-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-175922448-1');
</script>
<meta name="description" content="We offer innovate and agile website solutions to local businesses to allow them to have a professional web presence. We offer flexible and bespoke solutions!">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="./assests/css/linearicons.css" />
<link rel="shortcut icon" href="./assets\img\icons\favicon.ico" />
<link rel="stylesheet" href="./assets/css/animate.css" />
<link rel="canonical" href="https://makeyourweb.co.uk/">
<link rel="stylesheet" href="./assets/css/price.css">
<link rel="stylesheet" href="./assets/css/totop.css">
<link rel="stylesheet" href="./assets/css/linearicons.css" />
<link rel="stylesheet" href="./assets/css/magnific-popup.css" />
<link rel="stylesheet" href="./assets/css/jquery-ui.css" />
<link rel="stylesheet" href="./assets/css/nice-select.css" />
<link rel="stylesheet" href="./assets/css/main.css" />
<link href="./assets/img/icons/MetroUI_OS_Apple.png" rel="apple-touch-icon" />
<link href="asset/demos.css" rel="stylesheet"/>
<link href="lib/typed.js" rel="javascript">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>
var typed3 = new Typed('#typed3', {
strings: ['standard websites', 'premium websites', 'email accounts'],
typeSpeed: 45,
backSpeed: 75,
smartBackspace: true, // this is a default
loop: true
});
</script>
<title>Make Your Web | Get a website today | No hidden costs</title>
</head>
我的导航条码是
<!-- navbar -->
<?php //include('database/connection.php')?>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-theam text-white">
<div class="container">
<a class="navbar-brand m-0 p-0" href="/">
<img src="./assets/img/logos/logo.png" alt="picture" class="img-fluid" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav text-uppercase ">
<li class="nav-item">
<a class="nav-link active" href="/">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://makeyourweb.co.uk#pricing">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://makeyourweb.co.uk#services">Services</a>
</li>
<li class="nav-item pl-3">
<a class=" btn btn-outline-warning" href="/quote">Get a quote</a>
</li>
</ul>
</div>
</div>
</nav>
如果你能帮忙，那就太感谢了！
2 个解决方案
解决方案1
0 已采纳 2020-10-02 15:15:34
为什么不尝试在你的 css 中给它背景颜色
.navbar-collapse {
background: #444;
}
解决方案2
0 2020-10-02 15:17:01
你有没有尝试过这样的事情？
div.navbar-collapse{
background: "your color";
}
如果需要，您可以添加一个!important来粉碎预定义的引导程序样式...
div.navbar-collapse{
background: "your color" !important;
}
导航栏-下拉切换菜单在使用 reactjs 的引导库中不起作用
[英]Navbar- dropdown toggle menu not working in bootstrap lib using reactjs
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.