导航栏向左移动时超过了页面内容的长度

Question

我正在使用 react-bootstrap 构建导航栏，但遇到以下问题。

当我滚动到顶部/右侧/底部或保持页面静止时，一切看起来都很好。

但是当我向左滚动时，内容右侧出现了一个空白，使得导航栏超出了主体的长度。

这是我的脚本：

const HomePage = () => {
  return (
    <div id="homePageTitle">
        <h1>Home Page</h1>
    </div>
  )
}


class Header extends React.Component {
  render() {
    return (
        <div>
          <Navbar inverse collapseOnSelect id="navbar">
            <Navbar.Header>
              <Navbar.Brand>
                <p>Brand</p>
              </Navbar.Brand>
            <Navbar.Toggle />
            </Navbar.Header>
            <Navbar.Collapse>
              <Nav pullRight>
                <NavItem eventKey={1}>Home</NavItem>
                <NavItem eventKey={2}>Projects</NavItem>
                <NavItem eventKey={3}>Passions</NavItem>
                <NavItem eventKey={4}>Contact</NavItem>
              </Nav>
            </Navbar.Collapse>
          </Navbar>
          <HomePage />
        </div>
    )};
  }

这是我的 CSS：

/*---------Header----------*/
.navbar-brand {
    min-height: 100px;
}

.navbar.navbar-inverse{
    width: 100%;
    height: 100px;
    margin-bottom: 0;
    background-color: lightskyblue;
    border: lightskyblue;
    border-radius: 0;
    position: fixed;
    top: 0;
    transition: opacity 0.5s;
}

.navbar-right {
    margin-top: 30px;
    font-size: 18px;
} 

/*---------HomePage----------*/

#homePageTitle {
    padding-top: 80px;
    padding-bottom: 420px;
    width: 100%;
    text-align: center;
    background-color: lightcoral;
    margin: 0;
    color: #507e9a;
}

即使只是关于为什么会发生这种情况的线索也非常感谢！谢谢！

Answer 1

我发现有人有类似的问题，并通过禁用水平滚动来解决这个问题post 中的建议。这完美解决了我的问题。

Answer 2

body 的默认边距为 8px。如果你想要那里的空白，然后添加相同的

margin: 0 8px;

到导航栏类。或者，您可以添加：

body{
    margin: 0;
}

这将完全删除空白。发生这种情况是因为 #homePageTitle 仍在文档流中，而导航栏为 position: fixed 已从文档流中删除，因此不受正文边缘的影响，因为它不再受正文的限制。

您可以通过添加以下内容来进一步了解这一点：

body{
    position:relative;
}

这会将 body 设置为要固定的导航栏的上下文，因此会再次受到 body 的边距的影响。如果您想保留边距，这可能是首选方法，因为您不需要在任何其他 position: fixed 元素上设置边距。

由于无法使用页面本身，很难确定，但我很确定这是您的问题。