So richten Sie Text in Bootstrap und React linksbündig aus

Question

Ich verwende React, React-Bootstrap.

Das ist mein React-Code-Snippet:

<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>
   { // ... rest of the components }
</Navbar>

Dies ist der Codeausschnitt, den ich beim Rendern im Browser in HTML konvertiere:

<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>

Es wird wie folgt gerendert:

Ich möchte, dass „Test 123“ linksbündig nach der Hamburger-Menüschaltfläche angezeigt wird. Wie lege ich CSS-Stile oder Bootstrap-Klassen fest?

Demo

Demo-Code-Sandbox

Update:

Hier ist das entsprechende CSS, das ich von den Entwicklungstools erhalten habe (falls das hilft):

PS:

Meinpackage.json:

"react": "^17.0.1"
"bootstrap": "^4.6.0",
"react-bootstrap": "^1.4.3"

Answer 1

添加我的自动课程。

Test 123

根据需要添加填充，例如：- px-3

Test 123

代码沙箱：https:// /codesandbox.io/s/dawn-sunset-gib5x5?file=/src/App.js:365-424

对于您的 bootstrap 版本，请使用以下类。 引导程序：4.6.0

Test 123

代码沙箱：https://codesandbox.io /s/cocky-bhabha-vmlhqj?file=/src/App.js