我用的是react,react引导法。
这是我的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>
{ // ... rest of the components }
</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>
其渲染如下所示:
我希望"Test123"在汉堡菜单按钮之后左对齐。我如何设置CSS样式或引导类?
- 演示**
- 更新日期:**
下面是我从开发工具中得到的相应CSS,如果有用的话:
- 附言:**
我的package.json
:
"react": "^17.0.1"
"bootstrap": "^4.6.0",
"react-bootstrap": "^1.4.3"
1条答案
按热度按时间35g0bw711#
加我-汽车类。
根据需要添加填充,例如:- px-3
代码沙盒:https://codesandbox.io/s/dawn-sunset-gib5x5?file=/src/App.js:365-424
对于您的 Bootstrap 版本,请使用以下类。4.6.0
代码沙盒:https://codesandbox.io/s/cocky-bhabha-vmlhqj?file=/src/App.js