html - bootstrap 5的导航栏项目alingment

Question

我坚持这个问题很长时间了。请帮我修复它......我真的尝试了各种方法，但它们都没有真正起作用。我希望我的登录按钮位于导航栏（右侧）的末尾，当我减小屏幕尺寸时，我希望它出现在汉堡菜单的左侧这是我的代码 -

<header class="header">

    <nav class="navbar navbar-expand-md navbar-light bg-light">

        <div class="container-fluid">

            <a class="navbar-brand" href="#">
                <img src="image/logo.png" alt="" width="150px" height="35px">
            </a>

            <div class="login-nav ms-auto mb-2 me-2 ">
                <ul class="navbar-nav login">
                    <li class="navbar-item login-item">
                        <a class="nav-link active" aria-current="page" href="#">Login</a>
                    </li>
                </ul>
            </div>


            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-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 ms-auto mb-2 ">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

</header>

我希望他们喜欢这些照片：

在此处输入图像描述

在此处输入图像描述

标签： htmlnavbar

Answer 1

这是一种解决方法。有两个登录链接。

<header class="header">

        <nav class="navbar navbar-expand-md navbar-light bg-light">
    
            <div class="container-fluid">
    
                <a class="navbar-brand" href="#">
                    <img src="image/logo.png" alt="" width="150px" height="35px">
                </a>
                <div class="mb-2 me-2 d-block d-md-none">
                    <ul class="navbar-nav login">
                        <li class="navbar-item login-item">
                            <a class="nav-link active" aria-current="page" href="#">Login</a>
                        </li>
                    </ul>
                </div>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-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 ms-auto mb-2 ">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                        </li>
                    </ul>
                </div>
                <div class="mb-2 me-2 d-none d-md-block">
                    <ul class="navbar-nav login">
                        <li class="navbar-item login-item">
                            <a class="nav-link active" aria-current="page" href="#">Login</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    
    </header>