CSS bootstrap 导航栏右侧项目无法正确对齐

Question

我正在使用引导程序，并且我有这个导航栏：

        <nav className="navbar navbar-expand-sm navbar-light bg-light">

            <a className="navbar-brand" href="#">Lead Manager</a>

            <button className="navbar-toggler" type="button" data-toggle="collapse"

                    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"

                    aria-expanded="false" aria-label="Toggle navigation">

                <span className="navbar-toggler-icon"></span>

            </button>

            <div className="collapse navbar-collapse" id="navbarSupportedContent">

                <ul className="navbar-nav my-2 my-lg-0">

                    <li className="nav-item">

                        <Link to="/register" className="navbar-link">Register</Link>

                    </li>

                    <li className="nav-item">

                        <Link to="/login" className="navbar-link">Login</Link>

                    </li>

                </ul>

            </div>

        </nav>

我正在使用 boostrap cdn 4.4.1：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.4.1/flatly/bootstrap.min.css" />

我正在努力实现这一目标：

然而，我不断得到这个：

我缺少什么？

Answer 1

尝试添加到包含“注册”和“登录”ml-auto的类列表的末尾<ul>

Answer 2

<div class="navbar-nav mr-auto"></div>只需在 后面添加即可<div class="collapse navbar-collapse" id="navbarSupportedContent">。还要更改组件的navbar-link类名称。nav-link<Link/>查看演示： https:&nbsp;//jsfiddle.net/rnm617jz/1/注意：我已将classNameattr 更改为class，因为我在演示中没有 React 并且想在没有它的情况下测试它。

Answer 3

ml-auto只需在 旁边添加类navbar-nav即可。<ul&nbsp;className="navbar-nav&nbsp;ml-auto&nbsp;my-2&nbsp;my-lg-0">要修复您的导航栏链接，请将navbar-link类别更改为nav-link<Link&nbsp;to="/"&nbsp;className="nav-link">sample</Link>