Bootstrap导航栏居右问题求助：添加mr-auto类无效

你的问题主要出在Bootstrap版本不兼容、错误的类名使用，还有CSS选择器写错这几个地方，具体修复方案如下：

1. 版本混用导致类失效 #

你引用了Bootstrap 5的CSS，但JS用的是Bootstrap 4的，版本不匹配会导致很多布局类失效。同时，mr-auto是Bootstrap 4的类，Bootstrap 5里已经改用逻辑方向类，对应的居右类是ms-auto（margin-start auto，等同于原来的margin-right auto）。

2. CSS选择器错误 #

你的CSS里写了.navbar-brand li和.navbar-brand li a，但实际上navbar-brand是包裹logo的<a>标签，里面根本没有<li>元素，正确的选择器应该是.navbar-nav li和.navbar-nav li a，否则你的样式根本不会作用到导航链接上。

3. 内联样式覆盖背景色 #

你的<nav>标签里加了style="background-color: #EFEFEF;"，这直接覆盖了CSS里.navbar的渐变背景，要去掉这个内联样式才能看到你设置的渐变效果。

修复后的完整代码 #

HTML部分（统一用Bootstrap 5）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Nome</title>
    <link rel="stylesheet" href="style.css">
    <!-- 统一使用Bootstrap 5的CSS和JS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/fontawesome.min.css">
</head>
<body>
    <section id="nav-bar">
        <nav class="navbar navbar-expand-lg navbar-light">
            <div class="container-fluid">
                <a class="navbar-brand" href="#"><img src="https://picsum.photos/400"></a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <i class="fa fa-bars"></i>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <!-- 使用Bootstrap 5的ms-auto代替mr-auto -->
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#">HOME</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">SERVICES</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">ABOUT US</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">TESTIMONIALS</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">CONTACT</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </section>

    <section id="banner">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <p class="promo-title">Esercizio Luglio 2023</p>
                    <p>Check the tutorials</p>
                    <a href="#"><img src="https://picsum.photos/400" class="play-btn">Watch Tutorials</a>
                </div>
                <div class="col-md-6 text-center">
                    <img src="https://picsum.photos/400" class="img-fluid" style="width: 200px;">
                </div>
            </div>
        </div>
    </section>
</body>
</html>

CSS部分（修正选择器）

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: sans-serif;
}

#nav-bar {
    position: sticky;
    top: 0;
    z-index: 10;
}

.navbar {
    background-image: linear-gradient(to right, #a517ba, #5f1782);
    padding: 0 !important;
}

.navbar-brand img {
    height: 40px;
    padding-left: 20px;
}

/* 修正选择器：.navbar-nav li 而非 .navbar-brand li */
.navbar-nav li {
    padding: 0 10px;
}

.navbar-nav li a {
    color: #FFD166 !important;
    font-weight: 600;
}

.fa-bars {
    color: #FFD166;
    font-size: 30px !important;
}

.navbar-toggler {
    outline: none !important;
}

#banner {
    background-image: linear-gradient(to right, #a517ba, #5f1782);
    color: #fff;
    padding-top: 5%;
}

.promo-title {
    font-size: 40px;
    font-weight: 600;
    margin-top: 100px;
}

.play-btn {
    width: 45px;
    margin: 20px;
}

#banner a {
    color: #fff;
    text-decoration: none;
}

另外还修复了banner部分的HTML结构错误（比如image-fluid应为img-fluid，列标签闭合错误）。

内容的提问来源于stack exchange，提问作者Lorenzo Castagno