向左移动时，Navbar超出了页面内容的长度

Question

我正在使用react-bootstrap构建一个Navbar，但遇到了以下问题。

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

但是当我向左滚动时，内容的右侧会出现空白区域，导致navbar超出主体的长度。

这是我的剧本：

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。如果你想要那里的空格，那么添加相同的

margin: 0 8px;

到navbar类。或者你可以添加：

body{
    margin: 0;
}

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

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

body{
    position:relative;
}

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

如果没有能够使用页面本身，很难肯定地说，但我很确定这是你的问题。

Answer 2

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