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

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/

注意：我将className的属性更改为class，因为我在演示中没有React，并且想要在没有它的情况下对其进行测试。

Answer 3

只需在library(stringr) str_replace_all(x, "[\r\n]" , "") 旁边添加ml-auto类，即可达到目的。

navbar-nav

要修复导航栏链接，请将<ul className="navbar-nav ml-auto my-2 my-lg-0"> 类更改为navbar-link

nav-link