css - 无法使用 justify-content: space-between; 在反应引导中

Question

我的问题是 justify-content: space-between 似乎在我的代码中不起作用。

import React from 'react';
import {Button, Navbar, Nav, NavDropdown} from 'react-bootstrap';
import '../styles/headerStyle.scss';
const Header = () => (
  <React.Fragment>
    <Navbar collapseOnSelect expand='lg' bg='dark' variant='dark'>
      <Navbar.Brand href='#home'>React-Bootstrap</Navbar.Brand>
      <Navbar.Toggle aria-controls='responsive-navbar-nav' />
      <Navbar.Collapse id='responsive-navbar-nav'>
        <Nav>
          <div className='container'>
            <Nav.Link>Features</Nav.Link>
            <Nav.Link>Pricing</Nav.Link>
            <NavDropdown title='Dropdown' id='collasible-nav-dropdown'>
              <NavDropdown.Item href='#action/3.1'>Action</NavDropdown.Item>
              <NavDropdown.Item href='#action/3.2'>
                Another action
              </NavDropdown.Item>
              <NavDropdown.Item href='#action/3.3'>Something</NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item href='#action/3.4'>
                Separated link
              </NavDropdown.Item>
            </NavDropdown>
            <Nav.Link>More deets</Nav.Link>
            <Nav.Link eventKey={2} href='#memes'>
              Dank memes
            </Nav.Link>
          </div>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  </React.Fragment>
);
export default Header;

这是样式表：

.container {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
}

这是我当前的结果： 当前标题

这是我遵循的教程，我不确定我的代码在哪里出错。提前感谢您的帮助！

标签： cssreactjsreact-bootstrap