Question

我正在使用React / Redux和Bootstrap4构建一个Web应用程序（我不是reactstrap）。该应用程序在页面顶部具有导航栏，但是，当导航栏呈现时，它未与浏览器顶部对齐，而是向下移动（请参见下文-注意：“患者”上方还有另一个侧边栏链接，该链接已被覆盖）通过导航栏）

我已经浏览过jsx，无法弄清楚是什么原因导致导航栏无法正确定位-它应位于顶部并在滚动时固定（请参见下文）。

我在下面列出了相关的代码（只是组件的渲染功能）-如果我错过了任何相关的部分，请发表评论，然后进行编辑。 react应用是使用create-react-app构建的。

index.html

<html>
  <head>
    ...
  </head>
  <body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
    <noscript>You need to enable JavaScript to run this app.</noscript>

    <div id="root"></div>
    <script>...required scripts...</script>
  </body>
</html>

App.js

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Router>
          <div className="App">
            <Route exact path="/login" component={LoginPage} />
            <Route exact path="/dashboard" component={Dashboard} />
          </div>
        </Router>
      </Provider>
    );
  }
}

Dashboard.js

class Dashboard extends Component {
  render() {
    return (
      <>
        <Navbar />
        <div className="app-body">
          <Sidebar path="dashboard" />
        </div>
      </>
    );
  }
}

Navbar.js

class Navbar extends Component {
  onLogoutClick = e => {
    e.preventDefault();
    this.props.logoutUser();
  };

  render() {
    const { user } = this.props.auth;

    return (
      <header className="app-header navbar">
        <button className="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
          <span className="navbar-toggler-icon" />
        </button>

        <a href="#" className="navbar-brand">
          <img src={logo} className="navbar-brand-full" height="35" alt="expo" />
          <img src={sygnet} className="navbar-brand-minimized" height="30" width="30" alt="expo" />
        </a>

        <button className="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show" >
          <span className="navbar-toggler-icon" />
        </button>

        <ul className="nav navbar-nav ml-auto">
          <li className="nav-item dropdown px-3">
            <a href="" className="nav-link" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" >
              {user.name}
            </a>
            <div className="dropdown-menu dropdown-menu-right">
              <Link to="/profile" className="dropdown-item">
                <i className="fa fa-user" />
                Profile
              </Link>
              <button onClick={this.onLogoutClick} className="dropdown-item" style={{ cursor: 'pointer' }} >
                <i className="fas fa-power-off" />
                Logout
              </button>
            </div>
          </li>
        </ul>
      </header>
    );
  }
}

Sidebar.js

return (
    <div className="sidebar">
      <nav className="sidebar-nav">
        <ul className="nav">
          <li className={liDashboard}>
            <Link to="/dashboard" className={linkDashboard}>
              <i className="nav-icon fas fa-fw fa-columns" /> Dashboard
            </Link>
          </li>
          <li className={liPatients}>
            <Link to="/patients" className={linkPatients}>
              <i className="nav-icon fas fa-fw fa-users" /> Patients
            </Link>
          </li>
          <li className={liInvoices}>
            <Link to="/invoices" className={linkInvoices}>
              <i className="nav-icon fas fa-fw fa-dollar-sign" /> Invoices
            </Link>
          </li>
          <li className={liProfile}>
            <Link to="/profile" className={linkProfile}>
              <i className="nav-icon fas fa-fw fa-user" /> Profile
            </Link>
          </li>
          <li className="nav-title"> Resources</li>
          <li className={liDocuments}>
            <Link to="/documents" className={linkDocuments}>
              <i className="nav-icon fas fa-file" /> Documents
            </Link>
          </li>
          <li className={liEducation}>
            <Link to="/education" className={linkEducation}>
              <i className="nav-icon fas fa-graduation-cap" /> Education
            </Link>
          </li>
        </ul>
      </nav>
      <button className="sidebar-minimizer brand-minimizer" type="button" />
    </div>
  );
};

Answer 1

   <body>
    <div class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
      <noscript>You need to enable JavaScript to run this app.</noscript>
      <div id="root"></div>
    </div>
    <script>...required scripts...</script>
   </body>

不要在身上放样式

React＆Bootstrap 4导航栏未正确定位

1 个答案: