完全的网络开发新手在这里。刚刚第一次集成了Bootstrap，我正在使用一组从这个链接中获得的导航条：https://react-bootstrap.github.io/components/navbar/
我注意到，虽然样式是正确的，一切看起来都很正常，但导航栏的文本内容并没有填满整个栏的宽度。图片如下所示
[！[在此处输入图像描述][1]][1]
Navbar文件代码提取

class Navsucks extends Component {
  // componentDidMount() {
  // }

  render() {
    return (
      <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark" >
  <Container>
  <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
  <Navbar.Toggle aria-controls="responsive-navbar-nav" />
  <Navbar.Collapse id="responsive-navbar-nav">
    <Nav className="me-auto">
      <Nav.Link href="#features">Features</Nav.Link>
      <Nav.Link href="#pricing">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>
    <Nav>
      <Nav.Link href="#deets">More deets</Nav.Link>
      <Nav.Link eventKey={2} href="#memes">
        Dank memes
      </Nav.Link>
    </Nav>
  </Navbar.Collapse>
  </Container>
</Navbar>
    );
  }
}

字符串
App.js代码提取

class App extends Component {
  state = { posty: []}
  
  componentDidMount() {
    
  }

  render() {

    return (
      
      <div className="App">   
        <Navsucks> </Navsucks>
        <header className="App-header">
          <Texts>  asdasd </Texts>
        </header>
        
      </div>
    );
  }
}

export default App;

型
我真的只是希望文本的左半部分和右半部分拥抱屏幕边缘。这可能吗？任何帮助是非常感谢！
谢谢你，谢谢