将自定义 css 添加到 React-Bootstrap 组件
Posted
技术标签:
【中文标题】将自定义 css 添加到 React-Bootstrap 组件【英文标题】:Adding custom css to React-Bootstrap Component 【发布时间】:2020-06-19 03:36:44 【问题描述】:如何在 Nav 组件中添加一些自定义 CSS 样式来管理 nav 项之间的填充并使其浮动在页面右侧?
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>
);
【问题讨论】:
您希望导航栏项目从右到左而不是从左到右显示吗? 【参考方案1】:您需要覆盖引导程序的默认 CSS,您可以使用浏览器的检查器检查类名并修改这些类,因为 react-bootstrap 无论如何都会编译为引导程序
创建一个名为 Navbar.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>
);
【讨论】:
以上是关于将自定义 css 添加到 React-Bootstrap 组件的主要内容,如果未能解决你的问题,请参考以下文章
Django Allauth - 如何将自定义 CSS 类添加到字段?