React header 没有填满屏幕

Question

我是 React 的新手，不太明白为什么我的代码不会水平填充屏幕。

如果我打开页面，那么它会显示 header 的内容：

但是由于某些原因，也可以滚动到一边，这样它看起来像：

看起来不太好。哪里出了问题，如何解决？

Header.jsx

function Header(){ 

  return (
  <Navbar className="navbar-container" bg="dark" variant="dark" expand="lg">
    <Navbar.Brand href="https://github.com/">
      <img src={logo} alt="logo" style={{ width: 100, height: 100 }} />
      </Navbar.Brand>
    <Navbar.Toggle aria-controls="basic-navbar-nav" />
    <Navbar.Collapse id="basic-navbar-nav" className="navbar-collapse">
      <Nav.Link href="home">Home</Nav.Link>
      <Nav.Link href="projects" >Projects</Nav.Link>
      <Nav.Link href="settings" >Settings</Nav.Link>
    </Navbar.Collapse>
    <Navbar.Text lg="6" className="d-none d-lg-block">Daily progress:</Navbar.Text>
    <ProgressBar bgcolor="#6a1b9a" completed="60"/>
  </Navbar>
  );
}

export default Header;

Header.css

.navbar-container {
  width: 100%;
}

.navbar-collapse {
  text-align: center;
}

我以为在 navbar-container 中添加“width:100%”会解决问题，但没有任何效果。

Answer 1

您似乎在滚动页面，而不是页眉本身。您最好检查其他元素，因为它们可能会溢出。

如果您检查了其他元素：确实取决于元素中添加了哪些其他样式，但您可以尝试：

max-width: 100%; 正如 Ollie 所说，但请记住盒子模型：

.navbar-container {
  max-width: 100%;
  box-sizing: border-box;
}

或者您可以隐藏溢出：

.navbar-container {
  width: 100%;
  overflow-y: hidden;
  overflow-x: hidden; // if necessary
}

React header 没有填满屏幕

React header doesn't fill screen

html

css

header

reactjs

react-bootstrap