React- bootstrap: `NavBar` с` Nav` с флагом `fill` работает неправильно - PullRequest
Новая
       7

React- bootstrap: `NavBar` с` Nav` с флагом `fill` работает неправильно

2 голосов
/ 17 марта 2020

Как гласит заголовок, я хочу, чтобы мой NavBar увеличил всю доступную ширину, поэтому я добавляю флаг fill к Nav в NavBar компоненте. 

  <Navbar bg="light" expand="lg">
    <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav fill className="mr-auto">
          <Nav.Link href="/">Home</Nav.Link>
          <Nav.Link href="/news">News</Nav.Link>
          <Nav.Link href="/ship-schedule">Ship Schedule</Nav.Link>
          <Nav.Link href="/media-sponsor">Media Sponsor</Nav.Link>
          <Nav.Link href="/contacts">Contacts</Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Navbar>

Но это не работает, компоненты Nav.Link по-прежнему выровнены по левому краю.

enter image description here

Как я могу заставить эти Nav.Link компоненты заполнить ширину Nav.Bar компонент.

1 Ответ

0 голосов
/ 17 марта 2020

После прочтения Bootstrap API, чтобы решить эту проблему, мне нужно добавить два css класса к Nav компоненту. 

...
<Nav className="w-100 nav-justified">
...

Удалить mr-auto класс, добавить два класса w-100 и nav-justified. Затем для каждого Nav.Link компонента оберните его в Nav.Item компонент, например: 

...
<Nav.Item>
  <Nav.Link href="/">Home</Nav.Link>
</Nav.Item>
...
...