Невозможно оправдать NavItems в React-начальной загрузке - PullRequest
Новая
       31

Невозможно оправдать NavItems в React-начальной загрузке

0 голосов
/ 10 октября 2019 

function App() {
  return (
    <Router>
      <Fragment>
        <MenuBar />
        <Container fluid={true}>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/task" component={Task} />
          </Switch>
        </Container>
      </Fragment>
    </Router>
  );
}


function MenuBar() {
  return (
    <Navbar bg="dark" fixed="bottom">
      <LinkContainer exact to="/">
        <Navbar.Brand>App</Navbar.Brand>
      </LinkContainer>

      <Nav className="mr-auto" variant="tabs" justify="true">
        <Nav.Item>
          <LinkContainer exact to="/">
            <Nav.Link active={false}>Home</Nav.Link>
          </LinkContainer>
        </Nav.Item>
        <Nav.Item>
          <LinkContainer exact to="/task">
            <Nav.Link active={false}>Task</Nav.Link>
          </LinkContainer>
        </Nav.Item>
      </Nav>
    </Navbar>
  );
}
.container-fluid {
  padding-right:0;
  padding-left:0;
  margin-right:auto;
  margin-left:auto;
  height: 100%;
  width:100%;
}

Почему навигационные элементы не заполняются равномерно? Я хочу, чтобы вкладки занимали всю ширину экрана. Я пытался изменить Nav.Link на Nav.Item, он все еще не работает. Что я должен делать? Пожалуйста, помогите мне.

Я удалил панель навигации, и она работает, но проблема в том, что мне нужно переместить компонент MenuBar после компонента Container, чтобы поместить меню внизу. Есть ли лучшие решения?

Это сценарий моей строки меню https://i.stack.imgur.com/QwWmc.png

...