我正在使用react,react-bootstrap。
這是我的反應(yīng)代碼片段:
<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>
這是我在渲染到瀏覽器時(shí)轉(zhuǎn)換為 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”在漢堡菜單按鈕之后左對(duì)齊。如何設(shè)置 CSS 樣式或引導(dǎo)類(lèi)?
演示
演示代碼沙箱
更新:
這是我從開(kāi)發(fā)工具中獲取的相應(yīng) CSS(如果有幫助的話):
PS:
我的package.json
:
"react": "^17.0.1" "bootstrap": "^4.6.0", "react-bootstrap": "^1.4.3"
添加我的自動(dòng)課程。
Test 123
根據(jù)需要添加填充,例如:- px-3
Test 123
代碼沙箱:https:// /codesandbox.io/s/dawn-sunset-gib5x5?file=/src/App.js:365-424
對(duì)于您的 bootstrap 版本,請(qǐng)使用以下類(lèi)。 引導(dǎo)程序:4.6.0
Test 123
代碼沙箱:https://codesandbox.io /s/cocky-bhabha-vmlhqj?file=/src/App.js