时间戳

首页 > 解决方案 > Bootstrap 4 导航栏没有正确排列

twitter-bootstrap - 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>

标签： twitter-bootstrapbootstrap-4

解决方案

我创建了一个 .dropdown 类并在 css 中对其进行了更改。这导致了问题，现在已解决。

推荐阅读