如何在React-Bootstrap的Navbar中实现文本左对齐

环境版本 #

• react@^17.0.1
• bootstrap@^4.6.0
• react-bootstrap@^1.4.3

React代码片段 #

<Navbar bg="light" expand="lg" className="d-lg-none container-fluid">
   <Navbar.Toggle aria-controls="responsive-course-nav" /> 
   <span className="d-sm-inline-block">Test 123</span>
   { // ... 其他组件 }
</Navbar>

渲染后的HTML代码 #

<nav class="d-lg-none container-fluid navbar navbar-expand-lg navbar-light bg-light"><button
        aria-controls="responsive-course-nav" type="button" aria-label="Toggle navigation"
        class="navbar-toggler collapsed"><span class="navbar-toggler-icon"></span></button>
    <div class="d-flex text-right">Test 123</div>
    <div class="navbar-collapse collapse" id="responsive-course-nav">
        <div class="mr-auto navbar-nav">
            <div class="nav-item dropdown" style="padding-left: 0em; padding-right: 0.5em;"><a aria-haspopup="true"
                    aria-expanded="false" id="basic-nav-dropdown" href="#" class="dropdown-toggle nav-link"
                    role="button"><span class="d-lg-none" style="font-size: 21px;"> Course Content </span></a></div>
            <div class="nav-item dropdown" style="padding-left: 0em; padding-right: 0.5em;"><a aria-haspopup="true"
                    aria-expanded="false" id="basic-nav-dropdown" href="#" class="dropdown-toggle nav-link"
                    role="button"><span class="d-lg-none" style="font-size: 21px;"> Course Content </span></a></div>
        </div>
    </div>
</nav>

当前渲染效果 #

需求 #

让"Test 123"左对齐，紧邻汉堡菜单按钮。

补充：开发者工具中的CSS样式 #

解决方案 #

观察渲染后的HTML可知，"Test 123"被包裹在带有d-flex text-right类的div中，text-right是导致文本右对齐的核心原因，同时Navbar默认的flex布局会让子元素自动分配空间。以下是三种可行的解决方式：

方法1：添加Bootstrap内置类修改布局 #

修改React代码中的span类名，添加mr-auto让元素占据右侧剩余空间，自然左对齐：

<span className="d-sm-inline-block mr-auto">Test 123</span>

方法2：自定义CSS覆盖默认样式 #

如果无法修改原有类名，可以添加自定义CSS规则：

.navbar .d-flex.text-right {
  text-align: left !important;
  margin-right: auto;
}

margin-right: auto会强制元素向左靠拢，紧邻汉堡按钮。

方法3：使用React-Bootstrap的Navbar.Brand组件（推荐） #

将文本放入Navbar.Brand组件中，该组件默认左对齐，符合React-Bootstrap的组件规范：

<Navbar bg="light" expand="lg" className="d-lg-none container-fluid">
   <Navbar.Toggle aria-controls="responsive-course-nav" /> 
   <Navbar.Brand className="d-sm-inline-block">Test 123</Navbar.Brand>
   { // ... 其他组件 }
</Navbar>

内容的提问来源于stack exchange，提问作者Rnj