Question

我遇到了 Bootstrap 5 导航栏的问题。我正在尝试使用引导程序 5 创建响应式导航栏。我希望导航栏徽标位于左侧，而导航链接位于右侧。但是当我使用“navbar-expand-lg”类时，它会同时对齐左侧的徽标和导航链接。

我在 ul 标签中使用了 ml-auto 类。但它没有用。有人可以帮我吗？

注意：我认为 mr-auto 和 ml-auto 类在引导程序 5 中不能完美运行。

.custom {
    background-color: #333333;
}

.logo {
    width: 100px;
}

li a {
    color: white;
    font-weight: bold;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Bootstrap</title>
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
            crossorigin="anonymous"
        />

        <link rel="icon" href="desk-lamp.png" />

        <script
            src="https://kit.fontawesome.com/f726a9ed7b.js"
            crossorigin="anonymous"
        ></script>
        <link rel="stylesheet" href="main.css" />
    </head>
    <body>
        <!--  todo head  -->
        <header class="custom site-header container-fluid">
            <div class="container">
                <nav class="navbar navbar-dark navbar-expand-lg">
                    <a href="#" class="navbar-brand">
                        <img src="logo.png" class="logo" alt="" />
                    </a>

                    <button
                        class="navbar-toggler"
                        data-bs-toggle="collapse"
                        data-bs-target="#nav"
                    >
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    <div class="navbar-collapse collapse" id="nav">
                        <ul class="navbar-nav ml-auto">
                            <li class="navigation">
                                <a target="blank" href="index.html" class="nav-link">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" target="blank" href="blog.html">Blog</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" target="blank" href="reference.html"
                                    >Reference</a
                                >
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" target="blank" href="contact.html"
                                    >Contact</a
                                >
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </header>

        <!--  todo hero -->
        <section></section>

        <!-- bost your income -->
        <section></section>

        <!-- who benifits -->

        <section></section>

        <!--  course features -->

        <section></section>

        <!-- course features -->

        <section></section>

        <!-- video section -->

        <section></section>

        <!-- instructer section -->
        <section></section>

        <!-- testimonial setion -->
        <section></section>

        <!-- sign up section -->

        <section></section>

        <!-- footer -->

        <footer></footer>

        <!-- model -->

        <div></div>

        <!-- boostrap core javascript -->

        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
            crossorigin="anonymous"
        ></script>
    </body>
</html>

Answer 1

是的，你说得对。默认情况下禁用负边距，但可以通过设置 $enable-negative-margins: true 在 Sass 中启用。阅读他们的文档：https://getbootstrap.com/docs/5.0/utilities/spacing/#negative-margin

或者您可以编写自定义 CSS。检查我的代码 -

            .custom {
            background-color: #333333;
            }

            .logo {
                width: 100px;
            }

            li a {
                color: white;
                font-weight: bold;
            }

            .navbar-nav{
                margin-left: auto !important;
            }

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Bootstrap</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">




        <link rel="icon" href="desk-lamp.png" />

        <script
            src="https://kit.fontawesome.com/f726a9ed7b.js"
            crossorigin="anonymous"
        ></script>
        
    </head>
    <body>
        <!--  todo head  -->
        <header class="custom site-header container-fluid">
            <div class="container">
                <nav class="navbar navbar-dark navbar-expand-lg">
                    <a href="#" class="navbar-brand">
                        <img src="logo.png" class="logo" alt="" />
                    </a>

                    <button
                        class="navbar-toggler"
                        data-bs-toggle="collapse"
                        data-bs-target="#nav"
                    >
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    

                    <div class="navbar-collapse collapse " id="nav">
                        <ul class="navbar-nav">
                            <li class="navigation">
                                <a target="blank" href="index.html" class="nav-link">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" target="blank" href="blog.html">Blog</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" target="blank" href="reference.html"
                                    >Reference</a
                                >
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" target="blank" href="contact.html"
                                    >Contact</a
                                >
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </header>

        <!--  todo hero -->
        <section></section>

        <!-- bost your income -->
        <section></section>

        <!-- who benifits -->

        <section></section>

        <!--  course features -->

        <section></section>

        <!-- course features -->

        <section></section>

        <!-- video section -->

        <section></section>

        <!-- instructer section -->
        <section></section>

        <!-- testimonial setion -->
        <section></section>

        <!-- sign up section -->

        <section></section>

        <!-- footer -->

        <footer></footer>

        <!-- model -->

        <div></div>

        <!-- boostrap core javascript -->

        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
            crossorigin="anonymous"
        ></script>
    </body>
</html>

Bootstrap 5 Navbar-不能将站点标志（品牌）和导航链接分开

1 个答案: