[英]How can I remove the bottom border in the react-bootstrap navbar component?
so I'm working on a project using reactjs(not native) and I'm having a css issue with react-bootstrap.所以我正在使用reactjs(非本机)开发一个项目,并且我遇到了react-bootstrap的css问题。 When using the Navbar component with inverse and fluid styling to it I'm getting a small bottom border.
当使用具有反向和流畅样式的导航栏组件时,我得到了一个小的底部边框。 It's not only for that as, it's when I'm using the PageHeader component as well.
这不仅是因为,当我使用 PageHeader 组件时也是如此。 I've tried various css changes to.navbar/.navbar-header/.navbar-default like "border-bottom: none;important:" "border-radius; 0."
我尝试了各种 css 更改为 .navbar/.navbar-header/.navbar-default,例如“border-bottom: none;important:” “border-radius; 0”。 and none have succeeded.
没有一个成功。 I can edit other things such as the background color though.. Thanks
我可以编辑其他的东西,比如背景颜色。。谢谢
Navigation.js (this section of code shows navbar options for an authenticated user) Navigation.js(这部分代码显示了经过身份验证的用户的导航栏选项)
const NavigationAuth = () =>
<div>
<Navbar inverse fluid>
<Navbar.Header>
<Navbar.Brand>
<a href="/"> Bug Tracker </a>
</Navbar.Brand>
</Navbar.Header>
<Nav pullRight>
<NavItem eventKey={1} href={routes.LANDING}>Landing</NavItem>
<NavItem eventKey={2} href={routes.HOME}>Home</NavItem>
<NavItem eventKey={3} href={routes.ACCOUNT}>Account</NavItem>
<NavItem>
<SignOutButton />
</NavItem>
</Nav>
</Navbar>
</div>
App.js (Where the navigation component is called) (code snippet of class App) App.js(调用导航组件的地方)(class App 的代码片段)
render() {
return (
<Router>
<div>
<header>
<Navigation />
<hr />
<Route
exact path={routes.LANDING}
component={() => <LandingPage />}
/>
App.css (navbar css attempt snippet) App.css(导航栏 css 尝试片段)
.navbar-header {
border-bottom: none;
}
Your border is coming from your Navbar
component which has a .navbar.navbar-default
class...so you will need to remove border from that class 您的边框来自具有
.navbar.navbar-default
类的Navbar
组件,因此您需要从该类中删除边框
.navbar.navbar-default {
border-bottom: 0;
}
try this className="border-0"试试这个 className="border-0"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.