我有一个使用 Bootstrap 5（Beta 1）的网页。在此页面上，我需要在该区域的右下角添加一个按钮main。为了实现这一目标，我尝试使用Bootstrap 5 中的定位实用程序。我当前的代码如下所示：
<body class="d-flex flex-column h-100">
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" href="/">Pictures</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
</header>
<main role="main" class="flex-fill" style="background-color:pink;">
<div>
<div class="container">Here</div>
<div class="position-relative">
<div class="position-absolute bottom-0 end-0">
<button class="btn btn-primary">Add Picture</button>
</div>
</div>
</div>
</main>
<footer class="footer mt-auto bg-light">
<div class="container">
Hello
</div>
</footer>
</body>
不幸的是，我似乎无法将“添加图片”按钮放置在元素右下角、main页脚上方。我尝试了定位实用程序的几种组合。但是，我似乎无法让它正常工作。我究竟做错了什么？
小智 6
<div class="container">Here</div>
<div class="d-flex align-items-end justify-content-end">
<div>
<button class="btn btn-primary">Add Picture</button>
</div>
</div>
再加上从主类中删除类