html引导程序中的按钮出现问题

Question

我正在学习本视频教程https://www.youtube.com/watch?v=36jRXMsIFuA我正在使用bootstrap 5.0.0 beta 1我的代码如下：

<header>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-12 col-12 bg-light">
<div class="btn-group">
<button class="btn border dropdown-toggle my-md-4 my-2" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">AUD</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">USD</a>
</div>
</div>
</div>
<div class="col-md-4 col-12 text-center bg-dark"></div>
<h2 class="my-md-3 site-title">Online Store</h2>
<div class="col-md-4 col-12 text-right bg-danger">
<p class="my-md-4 header-links">
<a href="#" class="px-2">Sign In</a>
<a href="#" class="px-1">Create an Account</a>
</p>
</div>
</div>
</div>
</header>

它看起来是这样的，当我点击按钮时，没有下拉菜单。布局也很混乱。我的网站

与教程相比：教程图片

Answer 1

本教程使用的是Bootstrap 4.3.1，这是第四个版本，而不是最新的5.0。如果切换到v4，则下拉菜单会起作用。由于框架的重大更新(第一个版本号的增加(总是与以下版本不兼容。

关于布局，您的代码中有一个错误。您需要将<h2>标记放在带有背景色和样式的标记中，即上述<div>标记。

因此，更改以下行：

<div class="col-md-4 col-12 text-center bg-dark"></div>
<h2 class="my-md-3 site-title">Online Store</h2>

收件人：

<div class="col-md-4 col-12 text-center bg-dark">
<h2 class="my-md-3 site-title">Online Store</h2>
</div>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<header>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-12 col-12 bg-light">
<div class="btn-group">
<button class="btn border dropdown-toggle my-md-4 my-2" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">AUD</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">USD</a>
</div>
</div>
</div>
<div class="col-md-4 col-12 text-center bg-dark">
<h2 class="my-md-3 site-title">Online Store</h2>
</div>
<div class="col-md-4 col-12 text-right bg-danger">
<p class="my-md-4 header-links">
<a href="#" class="px-2">Sign In</a>
<a href="#" class="px-1">Create an Account</a>
</p>
</div>
</div>
</div>
</header>