在引导程序中右对齐菜单答案

【问题标题】：Align menu right in bootstrap在引导程序中右对齐菜单
【发布时间】：2021-09-07 11:43:14
【问题描述】：

我是新手。我试图将导航移动到右侧，徽标必须留在左侧。我不知道为什么我尝试了所有方法。我在 html 中使用 bootstrap 4.7 和 4.7 导航条码。我尝试了所有代码。例如： ul 类中的 ms-auto、ml-auto、justify-content-end，但仍然无法成功。帮我解决这个问题。请查看附件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>

    <!-- bootstrap -->
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">

    <!-- custom css -->
    <link rel="stylesheet" href="assets/css/style.css">

</head>
<body>
    <header>
        <div class="container-fluid grey">
            <div class="row">

                <div class="container pink">
                    <div class="row">

                        <div class="head-top pt-2">

                            <div class="col-md-6 pt-5">
                                <div class="logo">
                                    <img src="assets/images/logo.png" class="logo">

                                </div>
                            </div>


                            <div class="col-md-6 green">
                                <nav class="navbar navbar-expand-lg">

                                    <!-- <a class="navbar-brand" href="#"><img src="assets/images/logo.png" class="logo"></a> -->

                                    <ul class="navbar-nav ml-auto">

                                        <li class="nav-item">
                                            <a class="nav-link active" href="#">Active</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#">Link</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#">Link</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#">Contact</a>
                                        </li>

                                    </ul>
                                </nav>
                                <!-- <img src="assets/images/menu.png" class="menu-icon"> -->
                            </div>





                            <!-- head-top -->
                        </div>

                    </div>
                    <!-- container -->
                </div>


            </div>
            <!-- container-fluid -->
        </div>
    </header>




    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" ></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" ></script>
</body>
</html>

*{ 边距：0；填充：0；字体系列：无衬线； } 。商标{ 宽度：50px； } .菜单图标{ 宽度：30px； } 。灰色的{ 背景颜色：#8B8B8B； } 。粉色的{ 背景颜色：#EC8CBE； } 。绿色{ 背景颜色：#65D790； }

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

据我了解，您希望菜单一直位于右侧 - 位于徽标旁边，但仍位于右侧？对吧？

嗯，我通过将以下 css 放入 style.css 文件中实现了这一点：

.pt-2 {
    display: flex;
}

.navbar-expand-lg {
    justify-content: flex-end;
}

菜单会略高于徽标的高度，但您可以根据需要随意调整。将徽标抬高一点，或者将菜单向下推。

如果你想使用边距按下菜单，我发现

margin-top: 42px;

是正确的像素数量。

希望对您有所帮助。

【讨论】：

【解决方案2】：

不清楚您要对导航栏的行和列做什么，所以我从 Bootstrap 的 4.6.0 导航栏的干净副本开始。

如果您希望菜单项位于左侧，请将无序列表上的边距类别从 mr-auto 更改为 ml-auto。

而且最好将活动类放在列表项上，而不是链接上。

.bg-pink {
    background-color: #EC8CBE;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>


<nav class="navbar navbar-expand-lg navbar-light bg-pink">
    <div class="container-lg">
        <a class="navbar-brand" href="#"><img src="https://via.placeholder.com/60x40.png" class="logo"></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="#">Active</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>

        </div>
    </div>
</nav>

我为导航内容使用了container-lg，因此徽标和菜单不会继续在更大的屏幕上展开。

【讨论】：

感谢您的评论。我犯了错误，即：col-md-6。这不允许菜单向右移动。