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

Question

我正在使用 react-bootstrap 构建 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。如果你想要那里的空白，那么添加相同的

边距:0 8px;

到导航栏类。或者你可以添加:

body{
    margin: 0;
}

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

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

body{
    position:relative;
}

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

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