我正在嘗試混合<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'>來自
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/421174.html
標籤：