react-bootstrap justify-content-end 在桌面分辨率下不被识别，只有在移动设备上

Question

我正在尝试混合排列 <Nav> 项：

在桌面分辨率下，它们应该是 justify-content-end。
在移动分辨率下，它们应该是 fill。

我无法在桌面分辨率下进行任何对齐，只能在移动分辨率下进行。

无论我放置什么，桌面分辨率都保持左对齐：

移动分辨率正是我想要的：

所以问题是我如何混合这两者以及我在实施中做错了什么？

// parent Navigation.tsx
// Bootstrap imports
import { Container, Navbar } from 'react-bootstrap';

// Component imports
import NavigationItems from './NavigationItems';

// Import data
import data from '../../data/data.json';

const Navigation = () => {
  return (
    <Navbar collapseOnSelect sticky='top' expand='lg'>
      <Container>
        <Navbar.Brand>{data.navbar.navBrand}</Navbar.Brand>
        <Navbar.Toggle aria-controls='basic-navbar-nav' />
        <Navbar.Collapse id='basic-navbar-nav' className='justify-content-end'>
          <NavigationItems {...data.navbar.navItems} />
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
};

export default Navigation;

// child NavigationItems.tsx
// Bootstrap imports
import { Nav } from 'react-bootstrap';

const NavigationItems = (props: {name: string, href: string}[]): JSX.Element => (
  <Nav fill className='me-auto'>
    { 
      Object.entries(props).map((item, index) => {
        return (
          <Nav.Item key={index}>
            <Nav.Link href={item[1].href}>{item[1].name}</Nav.Link>
          </Nav.Item>
        )
      })
    }
  </Nav>
);

export default NavigationItems;

<Navbar.Collapse id='basic-navbar-nav' className='justify-content-end'> 来自文档示例 here。

我试过 <Nav className='me-auto justify-content-end'> 但这只会影响移动分辨率下的对齐方式。

Answer 1

这就是我最终得到的满足我所追求的结果：

// Navigation.tsx

// Bootstrap imports
import { Container, Navbar } from 'react-bootstrap';

// Component imports
import NavigationItems from './NavigationItems';

// Declare types
type Navigation = {
  navBrand: {
    value: string,
    href: string,
  },
  navItems: {
    value: string,
    href: string
  }[]
}

// Component for the navbar element
const Navigation = (props: Navigation): JSX.Element => {
  return (
    <Navbar collapseOnSelect sticky='top' expand='lg' bg='white'>
      <Container>
        <Navbar.Brand href={props.navBrand.href}>{props.navBrand.value}</Navbar.Brand>
        <Navbar.Toggle />
        <Navbar.Collapse className='justify-content-end'>
          <NavigationItems {...props.navItems} />
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
};

export default Navigation;

// NavigationItems.tsx

// Bootstrap imports
import { Nav } from 'react-bootstrap';

// Declare types
type NavigationItems = {
  value: string,
  href: string
}[]

// Component for the navbar items
const NavigationItems = (props: NavigationItems): JSX.Element => (
  <Nav fill>
    { 
      Object.entries(props).map((navItem, i) => {
        return (
          <Nav.Item key={i}>
            <Nav.Link href={navItem[1].href}>{navItem[1].value}</Nav.Link>
          </Nav.Item>
        )
      })
    }
  </Nav>
);

export default NavigationItems;

react-bootstrap justify-content-end 在桌面分辨率下不被识别，只有在移动设备上

react-bootstrap justify-content-end not being recognized when in desktop resolution, only when in mobile

twitter-bootstrap

reactjs

react-bootstrap