通过 Bootstrap 更改导航栏中切换按钮的位置答案

【问题标题】：Changing the position of toggle button in navbar made through Bootstrap通过 Bootstrap 更改导航栏中切换按钮的位置
【发布时间】：2020-12-24 02:35:50
【问题描述】：

我使用 Bootstrap 制作了一个导航栏。此处导航栏的切换按钮始终与导航栏的右侧对齐。我的问题是为什么它与它的权利对齐？是什么让切换按钮保留在导航栏的右侧。我们也没有按钮的 ml-auto 类，也没有位于品牌和按钮之间的具有自动长度的元素。那么该按钮上应用了哪个类的哪个属性以使其相对于导航栏右对齐？

从 ul 标记中删除 ml-auto 类后，切换按钮仍与导航栏的右侧对齐。

只需告诉我有关负责此的属性和类。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Bootstrap Installation</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="stylesheet" href="style2.css">
        <link rel="stylesheet" href="style1.css">
    </head>
    <body>
        <!-- <div class="green blue text-white">Hey</div> -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">NavBar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                </ul>
            </div>
            
        </nav>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </body>
</html>

【问题讨论】：

标签： javascript html jquery css twitter-bootstrap

【解决方案1】：

类 .navbar 具有属性，将按钮向右对齐：

display: flex;
justify-content: space-between;

space-between 使元素之间具有相等的空间。 .navbar 里面只有两个元素，所以右边有一个空格对齐按钮。

【讨论】：

【解决方案2】：

Bootstrap 从其版本 4 开始使用 flexbox。并且很多引导组件都使用了 flexbox 属性。

navbar 就是这样一个组件。导航栏默认应用了display:flex; 和justify-content:space-between CSS，这在大屏幕上会发生变化。这就是切换按钮在较小屏幕上保持在右侧的原因。

在大屏幕上，当没有切换按钮时。属性更改并变为justify-content:flex-start。

来自 Bootstrap 网站的图片：

【讨论】：

【解决方案3】：

"navbar-brand" 是导致您的切换器显示在右侧的数据属性。该属性在 HTML 中的位置控制着 toggler 在页面上的位置。

这是Bootstraps official documentation:的解释

默认情况下，导航栏切换器是左对齐的，但如果它们跟随像 .navbar-brand 这样的兄弟元素，它们将自动对齐到最右边。反转标记将反转切换器的位置。

因此，请将您的 toggler 类放在第一位，navbar-brand 类放在其后，以便在左侧显示 togglder。

【讨论】：