无法在我的网站导航栏中为 CSS Bootstrap 创建下拉按钮的下拉效果答案

【问题标题】：Unable to create the dropdown effect for a dropdown button in my website navbar for CSS Bootstrap无法在我的网站导航栏中为 CSS Bootstrap 创建下拉按钮的下拉效果
【发布时间】：2021-02-28 06:23:06
【问题描述】：

当我单击导航栏中右侧标记为“下拉”的按钮时，下拉效果无法显示列为下拉项目的链接（操作、另一个操作、此处的其他内容）。我确信 CSS 类会以某种方式覆盖效果。是哪些显示类型导致下拉菜单不发生（inline-block、flex..）

/* ====================== General */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');


body {
  font-family: 'Open Sans', sans-serif;
}


.form-control {
  margin-bottom: 20px;
}

.btn {
  border-radius: 0px;
}

.btn:hover {
  cursor: pointer;
}

.button-width {
  width: 200px;
}

#home_container {
  height: 500px;
}

#background-image {
  background-image: "../images/yoga-stock.jpg";
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

/* ======================= Nav */

.navbar {
  background-color: #fff;
  height: 46px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  margin-bottom: 1rem;
  position: relative;
  z-index: 9999;
}

.navbar a {
  color: #66757f;
  font-size: 14px;
  font-weight: bold;
}

.navbar a:hover {
  color: #1c94e0;
}

.navbar-brand {
  display: flex;
  align-items: center;
}

.navbar-brand > img {
  display: inline-block;
  margin-bottom: 2px;
  margin-right: 5px;
  width: 130px;
  border-radius: 2px;
}

.nav > li > a > img {
  width: 32px;
  border-radius: 32px;
}

ul.nav.navbar-nav {
  align-items: center;
}

ul.nav.navbar-nav li {
  margin: 0 0.5rem;
  display: flex;
}

nav form.navbar-form {
  display: flex;
  position: relative;
}

#search.form-control {
  border-radius: 20px;
  margin-bottom: 0;
  width: 100%;
  font-size: 13px;
  padding-right: 28px;
  box-sizing: border-box;
}

#search.form-control + .btn {
  position: absolute;
  right: 9px;
  top: 2px;
  bottom: 4px;
  z-index: 1;
  padding: 0;
  color: #66757f;
}

#search.form-control + .btn:active,
#search.form-control + .btn:focus {
  box-shadow: none;
}

#search:active,
#search:focus {
  box-shadow: none;
  border: 2px solid #007bff;
}

/* on "onboarding" pages (signup & login), the navbar is
   different: no search box, the logo is centered, and it has
   a background color.
 */

.onboarding > .navbar {
  background-image: url("/static/images/nav-bg.png");
  background-size: 100% 100%;
}

.onboarding .navbar-header {
  margin: 0 auto;
}

.onboarding .navbar-brand {
  margin: 0;
}

.onboarding .navbar-brand span {
  display: none;
}

.onboarding .nav.navbar-nav.navbar-right {
  position: absolute;
  right: 16px;
}

.onboarding > .navbar a {
  color: #fff;
}

.onboarding > .navbar form.navbar-form {
  display: none;
}

.onboarding {
  background-color: #fff;
}

@media (max-width: 468px) {
  nav form.navbar-form {
    display: none;
  }
}

nav + .container {
  margin-bottom: 1rem;
}

#nav-profile-image{
  border-radius: 100%;
  display: block;
  margin-left: -15px;
  margin: 0 auto 15px;
  max-height: 50px;
  max-width: 50px;
}

/* ===================== User profile */

.join-message {
  align-items: center;
  margin: auto;
}

#profile-image,
#profile-avatar {
  border-radius: 100%;
  display: block;
  margin-left: -15px;
}

#profile-image {
  margin: 0 auto 15px;
  width: 100%;
  height: 200px;
  width: 200px;
}

.profile-avatar {
  width: 200px;
  height: 200px;
  border: 5px solid #fff;
  margin-top: -120px;
  z-index: 1;
  position: relative;
  box-shadow: 0 1px 1px rgba(136, 153, 166, 0.15);
}

.timeline-image {
  border-radius: 48px;
  height: 48px;
  width: 48px;
  margin-top: 2px;
}

.message-area,
.timeline-image {
  display: inline-block;
}

.message-area {
  margin-left: 10px;
}

#warbler-hero {
  height: 360px;
  margin-top: -16px;
  opacity: 0.7;
  background-size: cover;
  background-position: top center;
}

.full-width {
  width: 100vw;
  margin: 0 -50vw;
  position: relative;
  left: 50%;
  right: 50%;
}

.row.full-width {
  background-color: #fff;
  margin-top: -80px;
  margin-bottom: 1rem;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
  height: 60px;
  align-items: center;
}

.user-stats > .ml-auto {
  display: flex;
  align-items: center;
}

.user-stats > .ml-auto .btn {
  min-width: 105px;
  padding: 6px 16px;
}

.stat {
  text-align: center;
  height: 60px;
  box-sizing: border-box;
  padding: 14px 15px 7px;
  line-height: 1;
}

.stat > .small {
  color: #657786;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 0.02em;
  margin-bottom: 0;
}

.stat > .small + h4 {
  font-size: 18px;
  font-weight: bold;
  padding-top: 3px;
}

#sidebar-username {
  margin-top: 30px;
  font-size: 21px;
  font-weight: bold;
  line-height: 28px;
  word-wrap: break-word;
}

@media (max-width: 768px) {
  .full-width .user-stats .stat {
    display: none;
  }
}


/* ============================ Signed out home */

.home-hero {
  height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 0;
  width: 100vw;
  left: 0;
  z-index: -1;
  background-image: url("../static/images/yoga-stock.jpg");
  background-size: cover;
  background-position: center center;
  color: #fff;
  text-align: center;
  padding: 1rem;
  text-shadow: 0 0 8px #66757f;
}





/* ========================== Signup/Login */

#user_form input.form-control {
  font-size: 18px;
  font-weight: bold;
  padding: 12px;
}


/* ================================ 404 page */

.message-404 {
  color: white;
  margin-top: 2em;
  text-align: center;
}

.message-404 a {
  color: white;
}

.message-404 > h4.display-4 {
  font-size: 2.5em;
}

.message-404 .form-inline input {
  flex: 1;
}

<!-- --------base.html-------- -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Lunchtime Yoga for Professionals</title>

  <link rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://unpkg.com/jquery"></script>
  <link rel="stylesheet"
        href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
  <link rel="stylesheet" href="style.css">
</head>

<body>
<nav class="navbar navbar-expand">
  <div class="container-fluid">
    <div class="navbar-header">
      <a href="/" class="navbar-brand">
        <span>Lunchtime Yoga</span>
      </a>
    </div>
    <ul class="nav navbar-nav">
      <li><a href="/">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#calendar_jump">Classes</a></li>
      <li><a href="#contact_jump">Contact</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <!-- <li><a href="/instructor_access">Instructor Access</a></li> -->
      <!-- {% if g.user %} -->
      <!-- <li><a href="/logout">Log out</a></li> -->
      <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">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      
      
      <!-- {% endif %} -->
    </ul>
  </div>
</nav>


<div class="container">

</div>
<link href="/static/yoga_js.js">
</body>
</html>

下面是我的 HTML 和 CSS。

【问题讨论】：

它确实溢出了身体，因为它向左掉了，但它仍然无法重现：jsfiddle.net/davidliang2008/vd92jf3m/4
感谢您的帮助！它在 jsfiddle 中效果很好，但是当我将它复制粘贴到我的文件中时，由于某种原因它不起作用。我将 JS 文件链接到我的 HTML，并将脚本链接作为正文中页面的最后一项包含在内。不知道发生了什么！
请仔细阅读 Bootstrap 文档以了解如何设置：getbootstrap.com/docs/4.5/getting-started/introduction：Bootstrap 依赖于两件事：jQuery 和 Popper.js。所以你需要在加载 Bootstrap.js 之前先加载这两个。

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

您的代码中没有包含 bootstrap.min.js cdn，它必须在 jQuery 之后。

<script src="https://unpkg.com/jquery"></script>
  <script> src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>

这里应该这样编辑：

<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">

更多相关链接：

https://getbootstrap.com/docs/4.0/components/dropdowns/

在我的本地主机上工作：

【讨论】：