我无法让我的旋转木马在 bootstrap 4 下正常工作，不知道为什么，所以更新到 bootstrap 5，旋转木马工作正常。但是，我的导航栏下拉菜单现在已停止工作。好吧，我承认，有一些黑客攻击，移动了包含的添加顺序等等，几次小的恐慌状态，所以不知道发生了什么！在我完全放弃导航栏之前，有人能发现下面的问题吗？
另外值得一提的是，我有一个由其他人完成的初始模板，因为我很可怜地制作任何远程“漂亮”的东西，他们的样式表包括它自己对 bootstrap 的引用。如果我把它留在里面，或者把它注释掉，似乎没有任何影响！不得不将所有“代码”放在一个大块中，因为编辑拒绝将 CSS 识别为代码并且不会发布。希望这现在有效。
首先是我的 head 部分，包含 CSS，然后是 body 标签，然后是 js 包含，然后是我的标题部分（在 _layout 视图中），以及导航内容。希望有人能帮忙！！
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" hreflang="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.3.0/css/tabulator.min.css" rel="stylesheet" />
<link rel="stylesheet" href="~/Content/style.css" />
<link href="~/Content/carousel.css" rel="stylesheet">
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.min.js" integrity="sha512-DedNBWPF0hLGUPNbCYfj8qjlEnNE92Fqn7xd3Sscfu7ipy7Zu33unHdugqRD3c4Vj7/yLv+slqZhMls/4Oc7Zg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment-with-locales.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.4.3/js/jquery_wrapper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5-qrcode/2.3.4/html5-qrcode.min.js"></script>
<script src="https://kit.fontawesome.com/c9ae0c0349.js" crossorigin="anonymous"></script>
<header>
<div class="container-fluid hdr d-flex align-items-stretch">
<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-12 log">
<a href="@Url.Action("Index", "Home")"><img class="img-fluid" src="~/Content/images/Shop.png" width="350" height="181" alt="Shop" title="Shop" /></a>
</div>
<div class="col-lg-8 col-sm-12 lnx">
<div class="row cons d-flex align-items-stretch">
<div class="col call">
<span class="actn">Book A Free Consultation today</span>
<span class="cal"><a href="tel:+441245400370" class="btn btn-cal"><i class="fa-solid fa-phone"></i></a> <a href="tel:+0000 0000000">00000 0000000</a></span>
<span class="eml"><a href="mailto:address" class="btn btn-cal"><i class="fa-solid fa-at"></i></a> <a href="mailto:address">Click to e-mail</a></span>
@if (Request.IsAuthenticated) {
<span class="actn">
<a href="@Url.Action("LogOff", "Account")">
Log Out
<span class="glyphicon glyphicon-log-out"></span>
</a>
</span>
}
else {
<span class="actn">
<a href="@Url.Action("Login", "Account")">
Log In
<span class="glyphicon glyphicon-log-in"></span>
</a>
</span>
}
</div>
</div>
<nav class="navbar navbar-expand-lg">
<div class="container-fluid ">
<a class="navbar-brand" href="#">Pages</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" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="@Url.Action("Services", "Home")">Our Services</a>
<a class="dropdown-item" href="@Url.Action("Maintenance", "Home")">Stove Maintenance</a>
<a class="dropdown-item" href="@Url.Action("Packages", "Home")">Installation</a>
</div>
</li>
@if (Request.IsAuthenticated) {
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownInternal" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Internal
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownInternal">
@if (User.IsInRole("Manager")) {
<a class="dropdown-item" href="@Url.Action("Register", "Account")">New Login</a>
}
<a class="dropdown-item" href="@Url.Action("ForgotPassword", "Account")">Forgot Password</a>
<a class="dropdown-item" href="@Url.Action("ChangePassword", "Manage")">Change Password</a>
@if (User.IsInRole("Sweep")) {
<a class="dropdown-item" href="@Url.Action("Index", "SweepLanding")">Sweep Portal</a>
}
</div>
</li>
}
<li class="nav-item">
<a class="nav-link" href="@Url.Action("Index", "Gallery")">
Gallery
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="@Url.Action("Index", "Finance")">
Finance
</a>
<li class="nav-item">
<a class="nav-link" href="@Url.Action("Index", "Contact")">
Contact
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</header>
Style Sheet :
/* External Styling Start */
@import url('https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css');
@import url('https://fonts.googleapis.com/css2?family=Lato&family=Raleway:wght@600&display=swap');
/* External Styling End */
/* Style Start */
divcentre {
border: 5px solid;
margin: auto;
width: 50%;
padding: 10px;
}
html { width: 100%;
height: 100%; }
h1 { font-family: 'Raleway', sans-serif;
font-size: 2.750em;
color: #f16420;
padding-top: 1em;
padding-bottom: 1em;
/*text-transform: lowercase; */
font-weight: 600;}
h2 { font-family: 'Raleway', sans-serif;
font-size: 2.125em;
color: #3b3b3b;
padding-bottom: 1em;
font-weight: 600; }
.hold h2 { color: #fff; }
.ftr h2 { padding-top: 0;
padding-bottom: 2em; }
h2.mbac { font-size: 2.125em;
/*text-transform: uppercase; */
color: #3b3b3b;
text-align: center;
padding: 1.875em 0 1em 0;
line-spacing: 2.5em; }
h3 { font-family: 'Raleway', sans-serif;
font-size: 1.750em;
font-weight: 600;
color: #3b3b3b;
padding-bottom: 1em; }
h4 { font-family: 'Lato', sans-serif;
font-size: 1.5em;
font-weight: 500;
color: #000;
padding-bottom: 1em; }
a { color: #f16420;
text-decoration: none; }
a:hover { color: #000; }
.cal a, .eml a, .ftr a { color: #e3e3e3 !important; }
.wht { border: 1px #f00 solid; }
.cal a:hover, .eml a:hover, .ftr a:hover { color: #f16420 !important; }
.but { padding-bottom: 1em; }
p, li, td { font-family: 'Lato', sans-serif;
font-size: 1.250em;
color: #3b3b3b; }
main li { list-style-image: url(images/li.png) ; }
p, ul { padding-bottom: 1em; }
p, li { line-spacing: 2em; }
.carousel-indicators li { list-style-image: none; }
.carousel indicators img { height: 150px;
width: 172px; }
.moac a.btn-cal { padding: 0.75em 1em;
border: 1px #707070 solid;
color: #fff !important; }
.moac a.btn-cal:hover { border: 1px #f16420 solid;
color: #f16420 !important; }
a.btn-cal { background-color: #f16420;
color: #fff;
font-size: 1em;
border-radius: 50%;
margin-right: 0.5em;
padding: 0.6em 0.75em;
border: 0px #fff solid; }
a.btn-cal:hover { background-color: #fff;
color: #f16420;
border: 0px #f16420 solid; }
.fixed-bottom {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
}
.call { display: none; }
.ftr h2 { color: #fff;
/*text-transform: uppercase;*/
font-weight: 600;
font-size: 2.25em;
padding-bottom: 1.750em; }
.fn p { color: #fff;
font-family: 'Lato', sans-serif;
font-size: 0.875em;
text-align: right;
margin-right: 0;
}
.accr img { padding-bottom: 2em; }
.addr img { margin-bottom: 1.5em; }
.addr i { margin-right: 0.5em; }
.addr a i { color: #f16420; }
.addr p { color: #fff;
font-family: 'Lato', sans-serif;
font-size: 1.125em; }
/* Style End */
/* Layers Start */
body.hold { height: 100vh; }
.hold { background: url(../images/contura-510g-4-pad.jpg) no-repeat;
background-position-x: 0%;
background-position-y: 0%;
background-position: top left;
background-attachment: fixed;
}
.log { padding: 1em 0;
text-align: center; }
.hdr, .ftr { background-color: #000;
padding-top: 1em;
padding-bottom: 1em; }
.intr { margin: 1.5em 0; }
.cal { margin-right: 1em; }
.moac { margin-bottom: 2em; }
.othl, .addr, .accr { padding-top: 2em;
padding-bottom: 2em; }
/*
body.page main { background: #fff url(../images/wmk.jpg) no-repeat center center;
background-position: fixed; }*/
.water-mark {
height: 100%;
width: 100%;
background-image: url(~/../images/wmk.jpg);
background-repeat: no-repeat ;
background-position: right top;
}
/* Layers End */
/* Back to Top Start */
#myBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: #b3b3b3; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
/* Some padding */
border-radius: 7px; /* Rounded corners */
color: #000;
padding: 15px 15px 0px 15px;
margin: 0;
}
#myBtn:hover {
background-color: #555; /* Add a dark-grey background on hover */
}
/* Back to Top End */
.slide1 { background: url(../images/slide1.jpg) no-repeat;
background-position: 25% center; }
.slide2 { background: url(../images/slide2.jpg) no-repeat;
background-position: 80% center; }
.slide3 { background: url(../images/slide3.jpg) no-repeat;
background-position: right center; }
.slide4 { background: url(../images/slide4.jpg) no-repeat;
background-position: 80% 25%; }
.slide5 { background: url(../images/slide5.jpg) no-repeat;
background-position: 70% 50%; }
img.cnt { display: flex;
margin-left: auto;
margin-right: auto; }
/* Nav styling start */
nav-link.active, .current_page_item { border-bottom: 3px #f16420 solid; }
.navbar { background: transparent;
}
button.navbar-toggler { background-color: transparent;
border-radius: 0;
padding: 0.6em;
border: 2px #b3b3b3 solid;
border-radius: 5px;
margin-left: auto;
margin-right: auto; }
.navbar-light .navbar-nav menu-item a, .navbar-light .menu-item a { color: #fff; }
#navbarSupportedContent .navbar-light .navbar-nav .menu-item a:focus, .navbar-light .navbar-nav .menu-item:hover, .navbar-nav .menu-item:focus, .navbar-light .navbar-nav .menu-item:hover { }
.navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }
.nav-item { font-family: 'Raleway', sans-serif;
font-size: 20px;
/*text-transform: uppercase;*/ }
.nav-item .nav-link { color: #fff;
border-bottom: 3px transparent solid; }
.nav-item .nav-link:hover { border-bottom: 3px #f16420 solid; }
.navbar-brand { display: none; }
.dropdown-menu { background-color: transparent; }
.dropdown-item { font-family: 'Raleway', sans-serif;
font-size: 20px;
font-weight: 500;
/*text-transform: uppercase;
*/color: #fff;
margin-bottom: 0; }
.dropdown-item:hover { color: #f16420;
background-color: transparent; }
/* Nav styling end */
/* Navigation to get Bootstrap working Start */
.navbar-light .navbar-nav .active > .menu-item a, .navbar-light .navbar-nav a.current_page_item, .navbar-light .navbar-nav a.show, .navbar-light .navbar-nav .show > .menu-item a {
color: rgba(0,0,0,.9);
}
.navbar-expand-lg .navbar-nav .menu-item a {
padding-right: .5rem;
padding-left: .5rem;
}
.navbar-nav .menu-item a {
padding-right: 0;
padding-left: 0;
}
.menu-item a {
display: block;
padding: .5rem 1rem;
padding-right: 1rem;
padding-left: 1rem;
}
.nav-justified .nav-item, .nav-justified .menu-item {
-ms-flex-preferred-size: 0 !important;
flex-basis: 0 !important;
-webkit-box-flex: 1 !important;
-ms-flex-positive: 1 !important;
flex-grow: 1 !important;
}
.navbar-expand-lg .navbar-nav a {
padding: 0.5em 1.25em 0.5em 0.75em;
}
.navbar-expand-lg .navbar-nav .nav-link { padding-left: 0.75em;
padding-right: 0.75em; }
.nav { }
.othl a.nav-link { text-transform: none;
font-family: 'Lato', sans-serif;
font-size: 18px;
font-weight: 500; }
.othl a.nav-link:hover, .othl a:hover { color: #fff !important;
background-color: #f16420;
}
/* Navigation to get Bootstrap Working End */
/* Stuff that WordPress might want to use Start */
p.comment-form-comment label { vertical-align: top; }
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
/**
* 8.0 - Alignments
*/
.alignleft {
float: left;
margin: 0.375em 1.75em 1.75em 0;
}
.alignright {
float: right;
margin: 0.375em 0 1.75em 1.75em;
}
.aligncenter {
clear: both;
display: block;
margin: 0 auto 1.75em;
}
blockquote.alignleft {
margin: 0.3157894737em 1.4736842105em 1.473684211em 0;
}
blockquote.alignright {
margin: 0.3157894737em 0 1.473684211em 1.4736842105em;
}
blockquote.aligncenter {
margin-bottom: 1.473684211em;
}
/**
* 9.0 - Clearings
*/
.clear:before,
.clear:after,
blockquote:before,
blockquote:after,
.entry-content:before,
.entry-content:after,
.entry-summary:before,
.entry-summary:after,
.comment-content:before,
.comment-content:after,
.site-content:before,
.site-content:after,
.site-main > article:before,
.site-main > article:after,
.primary-menu:before,
.primary-menu:after,
.social-links-menu:before,
.social-links-menu:after,
.textwidget:before,
.textwidget:after,
.content-bottom-widgets:before,
.content-bottom-widgets:after {
content: "";
display: table;
}
.clear:after,
blockquote:after,
.entry-content:after,
.entry-summary:after,
.comment-content:after,
.site-content:after,
.site-main > article:after,
.primary-menu:after,
.social-links-menu:after,
.textwidget:after,
.content-bottom-widgets:after {
clear: both;
}
.navbar-brand { color: #fff !important; }
/* Stuff that WordPress might want to use End */
/* Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
.hold { background-position: top center; }
.cal, .eml { display: inline-block !important;
}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
.moac { display: none; }
.navbar-brand { display: none; }
.call { display: inline-block;
text-align: right; }
.actn { font-family: 'Raleway', sans-serif;
font-size: 1.350em;
color: #fff;/*
text-transform: uppercase;*/
display: block;
padding-bottom: 0.5em;
margin-left: 1.65em; }
.cal, .eml { clear: both;
display: inline-block !important;
font-size: 1.1em;
font-family: 'Lato', sans-serif;
padding: 0.5em 0;
}
.cal { margin-left: 1.65em; }
.intr { margin: 3em 0; }
.dropdown-menu { border: 1px #707070 solid;
border-radius: 0;
background-color: #fff; }
.dropdown-item { color: #F16420;
border-bottom: 1px #b3b3b3 solid; }
.dropdown-item:last-child { border-bottom: 0px #b3b3b3 solid; }
.dropdown-item:hover { color: #000;
background-color: transparent; }
img.cnt { display: block !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
body.page main { background: none; }
body.page .blrb { background: #fff url(../images/wmk.jpg) no-repeat right center;
background-position: fixed; }
}
/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
.navbar-brand { display: none; }
h2 { font-size: 2.375em; }
.hold { background: url(../images/contura-510g-4-dt.jpg) no-repeat;
background-position-x: 0%;
background-position-y: 0%;
background-position: center top;
}
.cons { padding-bottom: 2em; }
.intr { margin: 6em 0; }
h1 { font-size: 2.5em; }
.but { padding-bottom: 1.75em; }
p, li, td { font-size: 1.375em; }
.btn-cal { font-size: 1.25em; }
.navbar-nav { text-align: right;
margin-top: 1em;
}
.log { text-align: left;
padding: 0.5em 0; }
.lnx { padding: 0.5em 0; }
.mobcn { display: none; }
.navbar > .container-fluid { padding: 0; }
}
/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1500px) {
.actn { margin-right: 1em; }
.cal, .eml { margin-left: 0; }
.call { text-align: right; }
.btn-cal { font-size: 1.25em; }
.actn, .cal, .eml { clear: none;
display: inline-block !important; }
}
已更新至 bootstrap 5，但是，我的导航栏下拉菜单现在已停止工作
在 bootstrap 5 中，尝试将您的
data-toggle="dropdown"data-bs-toggle="dropdown"