【发布时间】：2021-09-09 03:26:27
【问题描述】：
我们正在尝试让我们的导航项与页面右侧对齐。我们使用了容器类以及 align-items-end 无济于事。我们承认这部分内容非常混乱，我们不太了解正在发生的所有事情。我们想要完成的是让我们的页面顶部有一个封面图片，我们的导航向右，包含在容器中，我们需要一个标题和两个按钮。我们还需要在小（移动）断点处折叠导航。
这是我们的 Photoshop 设计，也是我们希望最终设计的样子。
这是我们当前代码呈现的内容。
我们做错了什么？
.cover {
min-height: 500px;
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(img/moco-trucks.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #fff;
position: relative;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
}
.navbar-dark:hover,
.navbar-dark:focus,
.navbar-dark:active {
color: rgba(199, 84, 40, 1)
}
.nav-item,
.nav-link {
color: #fff;
text-transform: uppercase;
}
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
color: #fff;
background-color: #c75428;
}
.nav-pills .nav-link.active:hover,
.nav-pills .show>.nav-link {
color: #fff;
background-color: #a64723;
}
.nav-link:hover,
.nav-link:focus,
.nav-link:active {
color: #c75428;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- container with bg img -->
<div class="cover">
<div class="container justify-content-end">
<!-- NAV Here -->
<nav class="navbar navbar-expand-sm navbar-dark" aria-label="responsive navbar">
<a class="navbar-brand" href="index.html"><img src="img/the-other-side-moving-storage-color-white.png" width="75%" height="75%"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#responsive-navbar" aria-controls="responsive-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="responsive-navbar">
<ul class="navbar-nav me-auto mb-2 mb-sm-0">
<li class="nav-item">
<a class="nav-link" href="denver-moving-services.html">Moving</a>
</li>
<li class="nav-item">
<a class="nav-link" href="denver-storage-company.html">Storage</a>
</li>
<li class="nav-item">
<a class="nav-link" href="receiving-and-delivery.html">Furniture Delivery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About</a>
</li>
<li class="nav-item">
<a href="free-estimate.html"><button class="btn btn-tosa" type="submit">Free Estimate</button></a>
</li>
</ul>
</div>
</nav>
</div>
<!-- Nav end -->
<!-- FS Hero -->
<div class="container-xl mb-4">
<div class="row text-center">
<div class="col-12">
<h1 class="py-5">Denver Moving and Storage</h1>
<a href="free-estimate.html"><button type="button" class="btn btn-tosa mx-3">Free Estimate</button></a>
<a href="about-us.html"><button type="button" class="btn btn-outline-tosa mx-3">Our Story</button></a>
</div>
</div>
</div>
<!-- End FS Hero -->
</div>
<!-- End Cover -->【问题讨论】：
标签： html css twitter-bootstrap bootstrap-4