反应标题不填满屏幕答案

【问题标题】：React header doesn't fill screen反应标题不填满屏幕
【发布时间】：2021-03-02 17:16:54
【问题描述】：

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

如果我打开页面，那么这就是标题显示的内容：

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

这看起来不太好。有什么问题以及如何解决？

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;
}

我认为在导航栏容器中添加“width:100%”可以修复它，但它没有做任何事情。

【问题讨论】：

尝试使用max-width: 100% 而不仅仅是width。
我试过了，但不幸的是它没有帮助@Ollie

标签： html css reactjs header react-bootstrap

【解决方案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
}

【讨论】：