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

Question

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

当我滚动到 top/right/bottom 或保持页面静止时，一切看起来都很好。

但是当我向左滚动时，内容的右侧出现白色space，导致导航栏超出主体长度。

这是我的脚本：

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

body 的默认边距为 8px。如果你想要白色space，那么添加相同的

margin: 0 8px;

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

body{
    margin: 0;
}

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

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

body{
    position:relative;
}

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

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

Answer 2

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