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: //jsfiddle.net/rnm617jz/1/

注意：我已将classNameattr 更改为class，因为我在演示中没有 React 并且想在没有它的情况下测试它。

Answer 3

ml-auto只需在 旁边添加类navbar-nav即可。

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

要修复您的导航栏链接，请将navbar-link类别更改为nav-link

<Link to="/" className="nav-link">sample</Link>