用户图标随 Bootstrap 5 导航栏中的菜单一起移动

问题描述 投票：0回答：1

问题：

我正在使用 Bootstrap 5 在 Django 项目顶部创建一个粘性导航栏。当导航菜单在较小的屏幕上展开时（通过切换按钮），用户图标 (fa-user) 会随菜单一起移动。我的目标是让用户图标保持固定在右侧，而只有导航菜单应该展开和折叠。

这是导航条码：

<nav class="navbar navbar-transparent fixed-top navbar-expand-lg">
    <div class="container-fluid d-flex justify-content-arround">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
                aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">
            <img class="imagotipe" src="{% static 'img/imagotipe-white-02.svg' %}"
                 alt="imagotipe">
        </a>
        <div class="collapse navbar-collapse text-center" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
                <a class="nav-link" href="#">Me</a>
                <a class="nav-link" href="#">About</a>
                <a class="nav-link" href="#">Contact</a>
            </div>
        </div>
        <div>
            <a href="#">
                <i class="fa-solid fa-user"></i>
            </a>
        </div>
    </div>
</nav>

问题：

当菜单在较小的屏幕上打开或关闭时，用户图标（fa-user）会随菜单移动。 我希望图标固定在导航栏的右侧，而只有导航菜单应该展开和折叠。 如何让菜单展开或折叠时用户图标固定在右侧而不移动？

correct position of the elements incorrect distribution of elements

html css bootstrap-5
1个回答
0
投票

在 Bootstrap 5 中，您可以使用 

order-lg-[order]
定义特定 Flex 项目在 
lg
屏幕尺寸中的顺序。文档这里

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  </head>
  <body>
    <nav class="navbar navbar-transparent fixed-top navbar-expand-lg">
        <div class="container-fluid d-flex">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
                    aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="#">
                <img class="imagotipe" height="50px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/640px-Google_2015_logo.svg.png"
                    alt="imagotipe">
            </a>
            <div class="d-flex order-lg-3">
                <a href="#">
                    <i class="fa-solid fa-user"></i>
                </a>
            </div>
            <div class="collapse navbar-collapse order-lg-2" id="navbarNavAltMarkup">
                <div class="navbar-nav">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                    <a class="nav-link" href="#">Me</a>
                    <a class="nav-link" href="#">About</a>
                    <a class="nav-link" href="#">Contact</a>
                </div>
            </div>
        </div>
    </nav>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.