javascript - React-bootstrap 导航栏图标不遵守 float

Question

我正在尝试创建一个包含 5 项的导航栏菜单，其中 1 项应位于左侧，另外 4 项应位于右侧。我正在使用 react-bootstrap 版本 1.0.0-beta.12

不幸的是，所有元素都出现在菜单的左侧，我不知道如何让它们向右移动(尽管在 css 中进行了大量修改)。谁能指出我哪里出错了？

这是我的 App return 函数:

return (
    <div className="App container">
      <Navbar collapseOnSelect expand="lg" className="MainNav">
        <Nav className="nav-item-left">
          <Nav.Link className="navlinkleft" as={NavLink} to="/home">1</Nav.Link>
          <Fragment><p  id='reloadtime' className="navbar-text"></p></Fragment>
        </Nav>
        <Navbar.Toggle collapseOnSelect aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse className="Boxer">
          <Nav className="RightBoxNav" >
            {this.state.isAuthenticated
              ? <Fragment>
                  <Nav.Link as={NavLink} to="/instructions">2</Nav.Link>
                  <Nav.Link onClick={this.handleLogout}>3</Nav.Link>
                </Fragment>
              : <Fragment>
                  <Nav.Link as={NavLink} to="/instructions">2</Nav.Link>
                  <Nav.Link as={NavLink} to="/confirm">3</Nav.Link>
                  <Nav.Link as={NavLink} to="/signup">4</Nav.Link>
                  <Nav.Link as={NavLink} to="/login">5</Nav.Link>
                </Fragment>
            }
          </Nav>
        </Navbar.Collapse>
      </Navbar>
      <Routes childProps={childProps} />
    </div>
  );

这是菜单在 large screen 上的样子.在 small screen 上.

第二个问题是，当我选择一个菜单选项时，切换按钮不会缩小，所以在小屏幕上，如果我点击，说 3 然后我希望右侧菜单折叠，但事实并非如此。有什么解决办法吗？

此处的 CSS 代码:

.App {
    margin-top: 5px;
    cursor: pointer;
}

.navbar-nav{
    margin: 0px;
    margin-left: 10px;
}

.navlinkleft{
    color: #bbb!important;
    float: left;
}

.navbar-default{
    border-color: #555;
    height:32px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.nav-link{
    color: #888!important;
    background-color: #222;
    margin-right:0px;
    height:30px;
    width:30px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    float:right;
}

.nav-link:hover{
    color: #bbb!important;
    background-color: #444;
    text-decoration: none;
}

.nav-item-left{
    background-color: #222;
    color:#888;
    float: left;
    height: 32px;
}


.navbar-text{
    color: #888!important;
    border-color: #555;
    height:32px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    vertical-align: middle!important;
}

.RightBoxNav {
    float: right!important;
    background-color: #222;
    vertical-align: middle!important;
}

.navbar-collapse .collapse .show{
    float:right;
}

.Boxer{
    float:right;

}

.MainNav {
    font-weight: bold;
    font-size: 130%;
    position: sticky;
    top: 0;
    cursor: pointer;
    background-color: #222;
    margin-bottom: 0px;
    z-index: 10;
    line-height:35px;
    height:35px;
    width:100%;
    min-width: 100%;
    min-height: 35px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-inline-start: 0px;
    vertical-align: middle!important;
}

.navbar-light .navbar-toggler{
    float: right;
    width:32px;
    height: 32px;
    margin:0px;
    padding:0px;
}
.navbar-light .navbar-toggler .navbar-toggler-icon{
    width:32px;
    height:32px;
    background-color: #555;
    padding:0px;
    margin:0px;
}
.navbar-light .navbar-nav .navbar-link{
    width:32px;
    height:32px;
    background-color: #555;
    padding:0px;
    margin:0px;
}

Answer 1

对于当前的问题，有几种方法可以解决，所有这些都来自 js 本身而不是来自 css，这里有一些:

1. 使用响应式属性

   <Container>
<Row>
<Col md={4}>md=4</Col>
<Col md={{ span: 4, offset: 4 }}>{md={{ span: 4, offset: 4 }}}
</Col>
</Row>.....

2. 使用 justify(子元素将在导航栏上平均分配)

   <Navbar className="bg-light justify-content-between">

3. 在左侧元素上使用 margin auto

   <nav.link m="auto">leftsideelement</nav.link>.....<nav.link>will be pushed to the right</nav.link>