css - 将自定义 css 添加到 React-Bootstrap 组件
问题描述
如何向 Nav 组件添加一些自定义 CSS 样式以管理导航项之间的填充并使其浮动在页面右侧?
const navbar = props => (
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#features">Home</Nav.Link>
<Nav.Link href="#pricing">About Us</Nav.Link>
<NavDropdown title="Facilities" id="collasible-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Library</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.2">Laboratories</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.3">Transportation</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.3">Hostel</NavDropdown.Item>
</NavDropdown>
<Nav.Link href="#pricing">Gallery</Nav.Link>
<Nav.Link href="#pricing">Event</Nav.Link>
<Nav.Link href="#pricing">Contact Us</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
解决方案
您需要覆盖引导程序的默认 CSS,您可以使用浏览器的检查器检查类名并修改这些类,因为 react-bootstrap 无论如何都会编译为引导程序
创建一个名为 Navbar.css的 css 文件
.navbar-nav {
float: right !important;
}
.navbar-expand-lg .navbar-collapse {
display: inline !important;
}
将其导入navbar.js组件
import "./Navbar.css";
const navbar = props => (
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#features">Home</Nav.Link>
<Nav.Link href="#pricing">About Us</Nav.Link>
<NavDropdown title="Facilities" id="collasible-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Library</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.2">Laboratories</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.3">Transportation</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.3">Hostel</NavDropdown.Item>
</NavDropdown>
<Nav.Link href="#pricing">Gallery</Nav.Link>
<Nav.Link href="#pricing">Event</Nav.Link>
<Nav.Link href="#pricing">Contact Us</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
推荐阅读
- android - 添加 firebase ML Kit 依赖项时,Gradle 构建失败
- angular - 角度构建错误:如果是故意的,请将表达式转换为“未知”的第一个角度
- ionic-framework - How do you update the iOS & Android app version in Ionic w/ Capacitor?
- autocomplete - 键入期间使用退格键时,Visual Studio 自动完成功能不起作用
- daml - 场景执行失败
- typescript - 使用 ramda 类型定义,管道函数抛出类型错误
- java - Execution failed for task ':compileJava'
- java - How to fix ArrayList java.lang.IndexOutOfBoundsException: Index 20 out-of-bounds for length 2
- python - Is there any way to find the derivative of a scalar value with respect to a vector using python?
- angular - How to allow (click) function to have multiple parameters?