Question

我在我的网站上使用了导航栏组件，但我想将它从右到左对齐，所以右边的第一件事是旅游（品牌名称）。

你能帮我吗？

这是导航栏的代码：

<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'，它会是这样的

原来的就是这个

Answer 1

在下面的代码中，删除类名：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>

如何从右到左对齐引导导航栏

1 个答案: