Выравнивание по центру NavItem в React Bootstrap

Я был в этом целую вечность и, похоже, не могу понять, как это сделать. В данный момент NavItem в моем NavBar выровнены по левому краю. Я хочу, чтобы они были по центру. Я пытался читать документацию здесь https://react-bootstrap.github.io/components/navs/, но это не работает.

Вот мой навбар:

<div className = "container">
  <Navbar collapseOnSelect>
      <Navbar.Collapse>
        <Nav  variant = "tabs" defaultActiveKey = "/home">
          <NavItem>
              <NavLink to = "/newSite/details">Details</NavLink>
          </NavItem>
          <NavItem>
              <NavLink to = "/newSite/tours">Tours</NavLink>
          </NavItem>
          <NavItem>
              <NavLink to = "/newSite/pois">POIs</NavLink>
          </NavItem>
        </Nav>
      </Navbar.Collapse>
  </Navbar>
</div>

в соответствии с документация, добавляющим этот className = "justify-content-center" , он должен работать, или ваш css перезаписывается

— 11.02.2019 11:53

@Vitorinofernandes Я пробовал это, но безуспешно, я добавил его в <Nav>, и мне нужно использовать внешний css

— 11.02.2019 12:00

html css reactjs react-bootstrap

11.02.2019 11:49

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

2 489

Ответы 1

Обязательно добавьте className="justify-content-center" в открывающий тег Nav. Если вы пытаетесь центрировать элементы навигации внутри панели навигации и панели навигации. Свернуть, добавьте встроенный стиль с помощью flex: 1.

<Navbar collapseOnSelect expand = "lg">
<Navbar.Toggle aria-controls = "responsive-navbar-nav" />
<Navbar.Collapse id = "responsive-navbar-nav">
   <Nav className = "justify-content-center" style = {{ flex: 1}}>
     <Nav.Item>
        <Nav.Link href = "/home">Home</Nav.Link>
     </Nav.Item>
     <Nav.Item>
        <Nav.Link href = "/home">Collection</Nav.Link>
     </Nav.Item>
     <Nav.Item>
        <Nav.Link href = "/home">Contact</Nav.Link>
     </Nav.Item>
     <Nav.Item>
        <Nav.Link href = "/home">Blog</Nav.Link>
     </Nav.Item>
   </Nav>
</Navbar.Collapse>
</Navbar>

Ознакомьтесь с разделом «Выравнивание и ориентация» в документации React Bootstrap. - https://react-bootstrap.github.io/components/navs/

25.10.2020 15:56