如何解决如何从右到左对齐引导导航栏
我在我的网站上使用了导航栏组件,但我想将它从右到左对齐,所以右边的第一件事是旅游(品牌名称)。
你能帮我吗?
这是导航栏的代码:
<Navbar bg="dark" expand="lg" style={{"padding": "0 10px","background-color": "#132c33 !important"}}>
<Navbar.Brand href="/">TouriStation</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="/events" className="navbarSections">Events</Nav.Link>
<Nav.Link href="/resturants" className="navbarSections">Resturants & caffes</Nav.Link>
<Nav.Link href="touristic" className="navbarSections">Touristic</Nav.Link>
<Nav.Link href="accommodations" className="navbarSections">Accomdation</Nav.Link>
<Nav.Link href="malls" className="navbarSections">Malls</Nav.Link>
<Nav.Link href="extraservices" className="navbarSections">Extra services</Nav.Link>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" value={this.state.search} onChange={this.onChangeSearch}/>
<Button variant="outline-info" onClick={() => window.location = "/Search/"+(this.state.search)}>Search</Button>
</Form>
<SplitButton style={{"display": this.state.user ? "none" : "block","color": "white",marginLeft: "0.5%"}} class="text-white"
menuAlign={{ lg: 'right' }}
title="Join Us"
id="dropdown-menu-align-responsive-2"
variant="info"
>
<Dropdown.Item href="/login">Login</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item href="/register">Register</Dropdown.Item>
</SplitButton>
<SplitButton style={{"display": this.state.user ? "block" : "none",marginLeft: "0.5%"}} class="text-white"
menuAlign={{ lg: 'right' }}
title="Profile"
variant="info"
id="dropdown-menu-align-responsive-2" >
<Dropdown.Item href="/newplace" style={{"display": this.state.user && this.state.Nonuser ? "block" : "none"}}>New Place</Dropdown.Item>
<Dropdown.Item href="/newevent" style={{"display": this.state.user && this.state.Nonuser ? "block" : "none"}} >New Event</Dropdown.Item>
<Dropdown.Divider style={{"display": this.state.user && this.state.Nonuser ? "block" : "none"}} />
<Dropdown.Item href="/profile">My Account</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item href="http://localhost:3000/logout/">Sign Out</Dropdown.Item>
</SplitButton>
</Navbar.Collapse>
</Navbar>
更新 如果我使用 me-auto 或 '.flex-row-reverse',它会是这样的
原来的就是这个
解决方法
在下面的代码中,删除类名:mr-auto。
<Nav className="mr-auto">
<Nav.Link href="/events" className="navbarSections">Events</Nav.Link>
<Nav.Link href="/resturants" className="navbarSections">Resturants & caffes</Nav.Link>
<Nav.Link href="touristic" className="navbarSections">Touristic</Nav.Link>
<Nav.Link href="accommodations" className="navbarSections">Accomdation</Nav.Link>
<Nav.Link href="malls" className="navbarSections">Malls</Nav.Link>
<Nav.Link href="extraservices" className="navbarSections">Extra services</Nav.Link>
</Nav>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。