Bootstrap 4导航栏无法正确排列
我正在使用Bootstrap 4，并且导航栏出现一些问题。我所面临的问题在我的下拉列表中，“服务”与导航栏的其余部分不一致。我做了很多研究，但似乎无法弄清楚自己在做错什么。我敢肯定，这是我正在仔细研究的东西。任何帮助将不胜感激。
谢谢！
body {
font-family: 'Roboto', sans-serif;
}
.dropdown {
padding-top: 3%;
;
}
.navbar {
font-size: 18px;
}
.navbar-nav>li {
padding-left: 20px;
padding-right: 20px;
}
.back1 {
background-image: url(./assets/images/back1.png);
background-size: cover;
padding-bottom: 0%;
}
.back2 {
background-image: url(./assets/images/back2.png);
background-size: cover;
}
.hero {
min-height: 100%;
/* Fallback for browsers do NOT support vh unit */
min-height: 100vh;
/* These two lines are counted as one :-) */
padding-right: 1em;
padding-left: 1em;
display: flex;
align-items: center;
}
.heroText,
.heroButton,
.heroSubText {
padding-top: .4em;
}
.howItWorks {
padding-bottom: 3%;
}
#textColor {
color: #102D47;
}
.heroIcon {
color: #102D47;
padding-top: 5em;
vertical-align: middle;
}
.heroText {
font-size: 50px;
font-weight: 900;
color: #102D47;
}
.heroButton {
background-color: #102D47;
color: white;
}
.heroSubText {
padding-top: 1em;
padding-bottom: .5em;
font-size: 25px;
color: #102D47;
}
.howItWorks {
background-image: url(./assets/images/debut_light.png);
padding-right: 10%;
padding-left: 10%;
}
.bottomhero {
color: #102D47;
}
.heroFeatures {
font-weight: 200;
font-size: 20px;
color: #102D47;
}
.subjectHeadRight,
.subjectHeadLeft {
padding-top: 1.9em;
font-size: 35px;
font-weight: 900;
color: #102D47;
}
.subjectHeadFooter {
font-size: 25px;
color: white;
}
.footerText {
color: white;
}
.subjectHeadContact {
padding-top: 1%;
font-size: 25px;
color: #102D47;
}
.videoSection {
padding-top: 2em;
padding-bottom: 2em;
}
.page-footer {
background-color: #102D47;
}
/* Learn More Section */
.mainArea {
background-color: #20812d;
}
.signUpBox {
background-color: white;
margin-top: 3%;
margin-bottom: 3%;
padding-bottom: 8%;
}
.signUpHead {
font-size: 30px;
font-weight: 800;
padding-top: 4%;
}
.signUpSub {
font-size: 20px;
font-weight: 400;
margin-top: -4%;
}
.teamPic {
width: 40%;
margin-left: 30%;
}
.peopleImg {
border-radius: 40px;
border: lightgray solid 1px;
}
@media only screen and (max-width: 767px) {
.subjectHeadRight,
.subjectHeadLeft,
.howContentLeft,
.howContentRight {
text-align: center;
}
.howImg {
padding-top: 0px;
padding-bottom: 0px;
}
.subjectHeadRight,
.subjectHeadLeft {
padding-top: 0px;
font-size: 22px;
}
.howContentLeft,
.howContentRight {
padding-left: 2%;
padding-right: 2%;
}
}
@media only screen and (min-width: 1000px) {
.heroText {
font-size: 72px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link href="./assets/images/favicon.ico" rel="icon" type="image/x-icon" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;900&display=swap" rel="stylesheet">
<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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="style.css">
<title>Service Lead</title>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-center back2">
<a href="/" class="navbar-brand d-flex w-50 mr-auto"><img src="./assets/images/servicelead-logo-150.png" alt="Service Lead Logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
<ul class="navbar-nav w-100 justify-content-center">
<ul class="nav navbar-nav ml-auto w-100 justify-content-end">
<li class="nav-item">
<a class="nav-link " id="textColor" href="#">Industries</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="textColor" 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="#" id="textColor">Website Design</a>
<a class="dropdown-item" href="#" id="textColor">SEO</a>
<a class="dropdown-item" href="#" id="textColor">PPC</a>
<a class="dropdown-item" href="#" id="textColor">Call Booking</a>
<a class="dropdown-item" href="#" id="textColor">Facebook Marketing</a>
<a class="dropdown-item" href="#" id="textColor">Review Pro</a>
<a class="dropdown-item" href="#" id="textColor">... and More!</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" id="textColor" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" id="textColor" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" id="textColor" href="tel:6193688116">Sign Up</a>
</li>
</ul>
</div>
</nav>
<!-- Navbar End-->
<!-- Footer -->
<footer class="page-footer font-small blue pt-4">
<!-- Footer Links -->
<div class="container-fluid text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-6 mt-md-0 mt-3">
<!-- Content -->
<h5 class="subjectHeadFooter">About ServiceLead</h5>
<p class="footerText">
<div class="row">
<div class="col-12 footerText">
ServiceLead is built to help today's service contractors better manage their businesses. We are here to help you convert online leads to booked service appointments. Find out why so many contractors trust ServiceLead to grow their business!
</div>
</div>
</p>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none pb-3">
<!-- Grid column -->
<div class="col-md-3 mb-md-0 mb-3">
<!-- Links -->
<h5 class="subjectHeadFooter">Links</h5>
<ul class="list-unstyled ">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 mb-md-0 mb-3">
<!-- Links -->
<h5 class="subjectHeadFooter">Address</h5>
<p class="address footerText">
ServiceLead
</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3 footerText">© 2020 Copyright:
<a href="https://servicelead.com/"> ServiceLead.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer End-->
<script src="scripts.js"></script>
</body>
</html>
2 个答案:
答案 0 :(得分：0)
我制作了一个.dropdown类，并在CSS中对其进行了更改。造成此问题的原因现已解决。
答案 1 :(得分：0)
删除此内容，即可解决问题
.dropdown {
padding-top: 3%;
}
body {
font-family: 'Roboto', sans-serif;
}
/*
.dropdown {
padding-top: 3%; /* REMOVE this
}
*/
.navbar {
font-size: 18px;
}
.navbar-nav>li {
padding-left: 20px;
padding-right: 20px;
}
.back1 {
background-image: url(./assets/images/back1.png);
background-size: cover;
padding-bottom: 0%;
}
.back2 {
background-image: url(./assets/images/back2.png);
background-size: cover;
}
.hero {
min-height: 100%;
/* Fallback for browsers do NOT support vh unit */
min-height: 100vh;
/* These two lines are counted as one :-) */
padding-right: 1em;
padding-left: 1em;
display: flex;
align-items: center;
}
.heroText,
.heroButton,
.heroSubText {
padding-top: .4em;
}
.howItWorks {
padding-bottom: 3%;
}
#textColor {
color: #102D47;
}
.heroIcon {
color: #102D47;
padding-top: 5em;
vertical-align: middle;
}
.heroText {
font-size: 50px;
font-weight: 900;
color: #102D47;
}
.heroButton {
background-color: #102D47;
color: white;
}
.heroSubText {
padding-top: 1em;
padding-bottom: .5em;
font-size: 25px;
color: #102D47;
}
.howItWorks {
background-image: url(./assets/images/debut_light.png);
padding-right: 10%;
padding-left: 10%;
}
.bottomhero {
color: #102D47;
}
.heroFeatures {
font-weight: 200;
font-size: 20px;
color: #102D47;
}
.subjectHeadRight,
.subjectHeadLeft {
padding-top: 1.9em;
font-size: 35px;
font-weight: 900;
color: #102D47;
}
.subjectHeadFooter {
font-size: 25px;
color: white;
}
.footerText {
color: white;
}
.subjectHeadContact {
padding-top: 1%;
font-size: 25px;
color: #102D47;
}
.videoSection {
padding-top: 2em;
padding-bottom: 2em;
}
.page-footer {
background-color: #102D47;
}
/* Learn More Section */
.mainArea {
background-color: #20812d;
}
.signUpBox {
background-color: white;
margin-top: 3%;
margin-bottom: 3%;
padding-bottom: 8%;
}
.signUpHead {
font-size: 30px;
font-weight: 800;
padding-top: 4%;
}
.signUpSub {
font-size: 20px;
font-weight: 400;
margin-top: -4%;
}
.teamPic {
width: 40%;
margin-left: 30%;
}
.peopleImg {
border-radius: 40px;
border: lightgray solid 1px;
}
@media only screen and (max-width: 767px) {
.subjectHeadRight,
.subjectHeadLeft,
.howContentLeft,
.howContentRight {
text-align: center;
}
.howImg {
padding-top: 0px;
padding-bottom: 0px;
}
.subjectHeadRight,
.subjectHeadLeft {
padding-top: 0px;
font-size: 22px;
}
.howContentLeft,
.howContentRight {
padding-left: 2%;
padding-right: 2%;
}
}
@media only screen and (min-width: 1000px) {
.heroText {
font-size: 72px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link href="./assets/images/favicon.ico" rel="icon" type="image/x-icon" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;900&display=swap" rel="stylesheet">
<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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="style.css">
<title>Service Lead</title>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-center back2">
<a href="/" class="navbar-brand d-flex w-50 mr-auto"><img src="./assets/images/servicelead-logo-150.png" alt="Service Lead Logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
<ul class="navbar-nav w-100 justify-content-center">
<ul class="nav navbar-nav ml-auto w-100 justify-content-end">
<li class="nav-item">
<a class="nav-link " id="textColor" href="#">Industries</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="textColor" 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="#" id="textColor">Website Design</a>
<a class="dropdown-item" href="#" id="textColor">SEO</a>
<a class="dropdown-item" href="#" id="textColor">PPC</a>
<a class="dropdown-item" href="#" id="textColor">Call Booking</a>
<a class="dropdown-item" href="#" id="textColor">Facebook Marketing</a>
<a class="dropdown-item" href="#" id="textColor">Review Pro</a>
<a class="dropdown-item" href="#" id="textColor">... and More!</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" id="textColor" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" id="textColor" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" id="textColor" href="tel:6193688116">Sign Up</a>
</li>
</ul>
</div>
</nav>
<!-- Navbar End-->
<!-- Footer -->
<footer class="page-footer font-small blue pt-4">
<!-- Footer Links -->
<div class="container-fluid text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-6 mt-md-0 mt-3">
<!-- Content -->
<h5 class="subjectHeadFooter">About ServiceLead</h5>
<p class="footerText">
<div class="row">
<div class="col-12 footerText">
ServiceLead is built to help today's service contractors better manage their businesses. We are here to help you convert online leads to booked service appointments. Find out why so many contractors trust ServiceLead to grow their business!
</div>
</div>
</p>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none pb-3">
<!-- Grid column -->
<div class="col-md-3 mb-md-0 mb-3">
<!-- Links -->
<h5 class="subjectHeadFooter">Links</h5>
<ul class="list-unstyled ">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 mb-md-0 mb-3">
<!-- Links -->
<h5 class="subjectHeadFooter">Address</h5>
<p class="address footerText">
ServiceLead
</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3 footerText">© 2020 Copyright:
<a href="https://servicelead.com/"> ServiceLead.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer End-->
<script src="scripts.js"></script>
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？