如何将导航栏横幅扩展到导航栏行下方?
How do I extend my navbar banner below my navbar row?
我正在重建一个新网站并从 Bootstrap 3.3 升级到 Bootstrap 5。我正在重新创建导航栏的外观和感觉 here。我已经非常接近了,但我在使用横幅时遇到了问题。我不知道如何让横幅延伸到导航栏下方并仍然适合容器 class。
这是他们的一段代码,显示了我也选择使用的图像:
<nav class="navbar navbar-inverse navbar-static-top">
<script src="http://www.utah.gov/nav/fluidheader.js" type="text/javascript" class="utahgov"></script>
<div class="container">
<img src="root/images/purpleLogo.png" class="purpleLogo" />
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav ">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">HOME<span class="caret"></span></a>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li ><a href="https://www.ogm.utah.gov/index.php">Division Home</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/index.php">Oil and Gas Program Home</a></li>
</ul>
</li>
<li><a href="http://localhost:1234/Utah_OG_Website/forms.php">FORMS</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/statistics.php">STATISTICS</a></li>
<li><a href="https://oilgas.ogm.utah.gov/oilgasweb/live-data-search/lds-files/files-main.xhtml">WELL FILES</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">QUICK REFERENCES<span class="caret"></span></a>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceBonding.php">Well Bonding</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceDrillingPermits.php">Drilling Permits</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceDrillingWell.php">Drilling a Well</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceOperatorChanges.php">Operator Changes</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceReporting.php">Reporting</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
看起来他们所做的只是将图像放在与导航栏项目相同的容器中,横幅会自动溢出导航栏。到目前为止,我在自己的行中拥有导航栏元素。然后我使用列将横幅与导航栏项目分开。但是,由于横幅位于导航栏内 class,它会将导航栏延伸得太低。
img {
vertical-align: middle;
max-width: 100%;
max-height: 100%;
margin-bottom: 15px;
}
.homeBanner{
display: block;
margin-right: 0;
margin-left: 0;
z-index: 1;
width: 100%;
}
.purpleLogo{
position: absolute;
z-index: 2;
}
.hover:hover{
background-color: #754775;
}
.hover a{
text-decoration: none;
}
.navbar-nav {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
color: #fff;
}
a.nav-link.dropdown-toggle.show {
background-color: #78496a;
transition: none;
}
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
font-size: 14px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
background-color: #f5f5f5;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container">
<div class="row">
<div class="col-2">
<img id="purpleLogo" src="https://www.ogm.utah.gov/coal/images/purpleLogo.png" />
</div>
<div class="col-10">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">HOME</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a href="https://www.ogm.utah.gov/index.php">Division Home</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/index.php">Oil and Gas Program Home</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">ABOUT US</a>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php">About Us</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php#mission">Mission Statement</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php#responsibilities">Responsibilities</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">DATA RESEARCH CENTER</a>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li><a href="http://localhost:1234/Utah_OG_Website/dataResearchCenter.php">Data Research Center Home</a></li>
<li><a href="https://dataexplorer.ogm.utah.gov/">Data Explorer</a></li>
<li><a href="https://oilgas.ogm.utah.gov/oilgasweb/live-data-search/lds-main.xhtml">LiveData Search</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/electronicReporting.php">Electronic Reporting</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/forms.php">FORMS</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/statistics.php">STATISTICS</a></li>
<li class="dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">QUICK REFERENCES</a>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceBonding.php">Well Bonding</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceDrillingPermits.php">Drilling Permits</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">OTHER LINKS</a>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li><a href="http://localhost:1234/Utah_OG_Website/otherLinks.php#:~:text=Oil%20and%20Gas%20Associations%3A">Oil and Gas Associations</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/otherLinks.php#:~:text=For%20Students%20and%20Teachers">For Students and Teachers</a></li>
<li><a href="http://www.naturalresources.utah.gov/">Utah DNR</a></li>
<li><a href="http://www.utah.gov/main/index">Utah.gov</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/orphanWells.php">ORPHAN WELL PROGRAM</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
我能够解决我的问题。我必须做几件事:
- 我最终不需要使用 class 行和 class 列。
- 在我的 styles.css 文件中,
purpleLogo
被标记为 class 而它应该是一个 id。
- 我必须给
#navbarSupportedContent
一个 224px 的左边距,这样导航栏链接就不会与横幅重叠。
- 我不得不给
#purpleLogo
0px 的顶部位置。
- 我不得不删除
.img
class 并将这些属性分配给各个 ID。
#homeBanner{
display: block;
margin-right: 0;
margin-left: 0;
z-index: 1;
width: 100%;
}
#purpleLogo{
position: absolute;
top: 0px;
}
#navbarSupportedContent {
margin-left: 224px;
}
.hover:hover{
background-color: #754775;
}
.hover a{
text-decoration: none;
}
.navbar-nav {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
color: #fff;
}
a.nav-link.dropdown-toggle.show {
background-color: #78496a;
transition: none;
}
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
font-size: 14px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
background-color: #f5f5f5;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container">
<img id="purpleLogo" src="https://minerals.ogm.utah.gov/images/purpleLogo.png" />
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">HOME</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li ><a href="https://www.ogm.utah.gov/index.php">Division Home</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/index.php">Oil and Gas Program Home</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">ABOUT US</a>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php">About Us</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php#mission">Mission Statement</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php#responsibilities">Responsibilities</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php#staff">Staff</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php#emergencies">Emergencies</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php#email">Email Us</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php#facts">O&G Facts</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">DATA RESEARCH CENTER</a>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li><a href="http://localhost:1234/Utah_OG_Website/dataResearchCenter.php">Data Research Center Home</a></li>
<li><a href="https://dataexplorer.ogm.utah.gov/">Data Explorer</a></li>
<li><a href="https://oilgas.ogm.utah.gov/oilgasweb/live-data-search/lds-main.xhtml">LiveData Search</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/electronicReporting.php">Electronic Reporting</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/forms.php">FORMS</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/statistics.php">STATISTICS</a></li>
<li class="nav-item"><a class="nav-link" href="https://oilgas.ogm.utah.gov/oilgasweb/live-data-search/lds-files/files-main.xhtml">WELL FILES</a></li>
<li class="nav-item"><a class="nav-link" href="https://oilgas.ogm.utah.gov/oilgasweb/live-data-search/lds-logs/logs-main.xhtml">WELL LOGS</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/noticesAndUpdates.php">NOTICES</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/rules.php">RULES AND STATUTES</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/publications.php">PUBLICATIONS</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/wellSpacingBoardOrders.php">WELL SPACING</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/mapResources.php">MAP RESOURCES</a></li>
<li class="dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">QUICK REFERENCES</a>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceBonding.php">Well Bonding</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceDrillingPermits.php">Drilling Permits</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceDrillingWell.php">Drilling a Well</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceOperatorChanges.php">Operator Changes</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceReporting.php">Reporting</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">OTHER LINKS</a>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li><a href="http://localhost:1234/Utah_OG_Website/otherLinks.php#:~:text=Oil%20and%20Gas%20Associations%3A">Oil and Gas Associations</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/otherLinks.php#:~:text=For%20Students%20and%20Teachers">For Students and Teachers</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/otherLinks.php#:~:text=National%20Energy%20Foundation)-,Government%20Agencies,-Automated%20Geographic%20Reference">Government Agencies</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/otherLinks.php#:~:text=Industry%20Information%20and%20Research">Industry Information and Research</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/otherLinks.php#:~:text=Oil%20and%20Gas%20Pricing">Oil and Gas Pricing</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/otherLinks.php#:~:text=Some%20of%20Utah%27s%20Top%20Oil%20and%20Gas%20Producers">Some of Utah's Top Oil and Gas Producers</a></li>
<li><a href="https://www.ogm.utah.gov/Board/redesign/board.html">DOGM Board Members</a></li>
<li><a href="http://www.naturalresources.utah.gov/">Utah DNR</a></li>
<li><a href="http://www.utah.gov/main/index">Utah.gov</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/orphanWells.php">ORPHAN WELL PROGRAM</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/aboutUs.php#emergencies">EMERGENCIES</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/permittingReview.php">PERMITTING</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/inspectionsReview.php">INSPECTIONS</a></li>
</ul>
</div>
</div>
</nav>
<img id="homeBanner" src="https://minerals.ogm.utah.gov/images/MINERALSmainSmall.jpg" />
我正在重建一个新网站并从 Bootstrap 3.3 升级到 Bootstrap 5。我正在重新创建导航栏的外观和感觉 here。我已经非常接近了,但我在使用横幅时遇到了问题。我不知道如何让横幅延伸到导航栏下方并仍然适合容器 class。
这是他们的一段代码,显示了我也选择使用的图像:
<nav class="navbar navbar-inverse navbar-static-top">
<script src="http://www.utah.gov/nav/fluidheader.js" type="text/javascript" class="utahgov"></script>
<div class="container">
<img src="root/images/purpleLogo.png" class="purpleLogo" />
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav ">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">HOME<span class="caret"></span></a>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li ><a href="https://www.ogm.utah.gov/index.php">Division Home</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/index.php">Oil and Gas Program Home</a></li>
</ul>
</li>
<li><a href="http://localhost:1234/Utah_OG_Website/forms.php">FORMS</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/statistics.php">STATISTICS</a></li>
<li><a href="https://oilgas.ogm.utah.gov/oilgasweb/live-data-search/lds-files/files-main.xhtml">WELL FILES</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">QUICK REFERENCES<span class="caret"></span></a>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceBonding.php">Well Bonding</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceDrillingPermits.php">Drilling Permits</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceDrillingWell.php">Drilling a Well</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceOperatorChanges.php">Operator Changes</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceReporting.php">Reporting</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
看起来他们所做的只是将图像放在与导航栏项目相同的容器中,横幅会自动溢出导航栏。到目前为止,我在自己的行中拥有导航栏元素。然后我使用列将横幅与导航栏项目分开。但是,由于横幅位于导航栏内 class,它会将导航栏延伸得太低。
img {
vertical-align: middle;
max-width: 100%;
max-height: 100%;
margin-bottom: 15px;
}
.homeBanner{
display: block;
margin-right: 0;
margin-left: 0;
z-index: 1;
width: 100%;
}
.purpleLogo{
position: absolute;
z-index: 2;
}
.hover:hover{
background-color: #754775;
}
.hover a{
text-decoration: none;
}
.navbar-nav {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
color: #fff;
}
a.nav-link.dropdown-toggle.show {
background-color: #78496a;
transition: none;
}
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
font-size: 14px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
background-color: #f5f5f5;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container">
<div class="row">
<div class="col-2">
<img id="purpleLogo" src="https://www.ogm.utah.gov/coal/images/purpleLogo.png" />
</div>
<div class="col-10">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">HOME</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a href="https://www.ogm.utah.gov/index.php">Division Home</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/index.php">Oil and Gas Program Home</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">ABOUT US</a>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php">About Us</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php#mission">Mission Statement</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php#responsibilities">Responsibilities</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">DATA RESEARCH CENTER</a>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li><a href="http://localhost:1234/Utah_OG_Website/dataResearchCenter.php">Data Research Center Home</a></li>
<li><a href="https://dataexplorer.ogm.utah.gov/">Data Explorer</a></li>
<li><a href="https://oilgas.ogm.utah.gov/oilgasweb/live-data-search/lds-main.xhtml">LiveData Search</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/electronicReporting.php">Electronic Reporting</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/forms.php">FORMS</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/statistics.php">STATISTICS</a></li>
<li class="dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">QUICK REFERENCES</a>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceBonding.php">Well Bonding</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceDrillingPermits.php">Drilling Permits</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">OTHER LINKS</a>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li><a href="http://localhost:1234/Utah_OG_Website/otherLinks.php#:~:text=Oil%20and%20Gas%20Associations%3A">Oil and Gas Associations</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/otherLinks.php#:~:text=For%20Students%20and%20Teachers">For Students and Teachers</a></li>
<li><a href="http://www.naturalresources.utah.gov/">Utah DNR</a></li>
<li><a href="http://www.utah.gov/main/index">Utah.gov</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/orphanWells.php">ORPHAN WELL PROGRAM</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
我能够解决我的问题。我必须做几件事:
- 我最终不需要使用 class 行和 class 列。
- 在我的 styles.css 文件中,
purpleLogo
被标记为 class 而它应该是一个 id。 - 我必须给
#navbarSupportedContent
一个 224px 的左边距,这样导航栏链接就不会与横幅重叠。 - 我不得不给
#purpleLogo
0px 的顶部位置。 - 我不得不删除
.img
class 并将这些属性分配给各个 ID。
#homeBanner{
display: block;
margin-right: 0;
margin-left: 0;
z-index: 1;
width: 100%;
}
#purpleLogo{
position: absolute;
top: 0px;
}
#navbarSupportedContent {
margin-left: 224px;
}
.hover:hover{
background-color: #754775;
}
.hover a{
text-decoration: none;
}
.navbar-nav {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
color: #fff;
}
a.nav-link.dropdown-toggle.show {
background-color: #78496a;
transition: none;
}
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
font-size: 14px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
background-color: #f5f5f5;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container">
<img id="purpleLogo" src="https://minerals.ogm.utah.gov/images/purpleLogo.png" />
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">HOME</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li ><a href="https://www.ogm.utah.gov/index.php">Division Home</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/index.php">Oil and Gas Program Home</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">ABOUT US</a>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php">About Us</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php#mission">Mission Statement</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php#responsibilities">Responsibilities</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php#staff">Staff</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php#emergencies">Emergencies</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php#email">Email Us</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/aboutUs.php#facts">O&G Facts</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">DATA RESEARCH CENTER</a>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li><a href="http://localhost:1234/Utah_OG_Website/dataResearchCenter.php">Data Research Center Home</a></li>
<li><a href="https://dataexplorer.ogm.utah.gov/">Data Explorer</a></li>
<li><a href="https://oilgas.ogm.utah.gov/oilgasweb/live-data-search/lds-main.xhtml">LiveData Search</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/electronicReporting.php">Electronic Reporting</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/forms.php">FORMS</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/statistics.php">STATISTICS</a></li>
<li class="nav-item"><a class="nav-link" href="https://oilgas.ogm.utah.gov/oilgasweb/live-data-search/lds-files/files-main.xhtml">WELL FILES</a></li>
<li class="nav-item"><a class="nav-link" href="https://oilgas.ogm.utah.gov/oilgasweb/live-data-search/lds-logs/logs-main.xhtml">WELL LOGS</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/noticesAndUpdates.php">NOTICES</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/rules.php">RULES AND STATUTES</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/publications.php">PUBLICATIONS</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/wellSpacingBoardOrders.php">WELL SPACING</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/mapResources.php">MAP RESOURCES</a></li>
<li class="dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">QUICK REFERENCES</a>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceBonding.php">Well Bonding</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceDrillingPermits.php">Drilling Permits</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceDrillingWell.php">Drilling a Well</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceOperatorChanges.php">Operator Changes</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/quickReferenceReporting.php">Reporting</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">OTHER LINKS</a>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li><a href="http://localhost:1234/Utah_OG_Website/otherLinks.php#:~:text=Oil%20and%20Gas%20Associations%3A">Oil and Gas Associations</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/otherLinks.php#:~:text=For%20Students%20and%20Teachers">For Students and Teachers</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/otherLinks.php#:~:text=National%20Energy%20Foundation)-,Government%20Agencies,-Automated%20Geographic%20Reference">Government Agencies</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/otherLinks.php#:~:text=Industry%20Information%20and%20Research">Industry Information and Research</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/otherLinks.php#:~:text=Oil%20and%20Gas%20Pricing">Oil and Gas Pricing</a></li>
<li><a href="http://localhost:1234/Utah_OG_Website/otherLinks.php#:~:text=Some%20of%20Utah%27s%20Top%20Oil%20and%20Gas%20Producers">Some of Utah's Top Oil and Gas Producers</a></li>
<li><a href="https://www.ogm.utah.gov/Board/redesign/board.html">DOGM Board Members</a></li>
<li><a href="http://www.naturalresources.utah.gov/">Utah DNR</a></li>
<li><a href="http://www.utah.gov/main/index">Utah.gov</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/orphanWells.php">ORPHAN WELL PROGRAM</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/aboutUs.php#emergencies">EMERGENCIES</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/permittingReview.php">PERMITTING</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/inspectionsReview.php">INSPECTIONS</a></li>
</ul>
</div>
</div>
</nav>
<img id="homeBanner" src="https://minerals.ogm.utah.gov/images/MINERALSmainSmall.jpg" />