文本隐藏在我的 Bootstrap 5 侧导航栏后面

Question

我正在尝试创建侧边导航栏（Bootstrap 5），但我的文字被隐藏在导航栏后面。关于如何解决此问题的任何提示？

这是我的侧边导航栏代码：

const Navbar = ({ handleClick, isLoggedIn, email }) => (
  <>
    <nav
      className="navbar navbar-expand d-flex flex-column align-item-center-start"
      id="sidebar"
    >
      <a href="/" className="navbar-brand text-light mt-8">
        <div className="display-6 font-weight-bold">
          <span>TESTING</span>
        </div>
      </a>
      <ul className="navbar-nav d-flex flex-column w-100">
        <li className=" h-25 nav-item border-bottom">
          <a href="/" className="nav-link text-light pl-4">
            HOME
          </a>
        </li>

        <li className="h-25  nav-item border-bottom">
          <a href="#" className="nav-link text-light ">
            SEARCH
          </a>
        </li>

        <li className="nav-item h-10 border-bottom">
          <a href="/show" className="nav-link text-light ">
            PODCASTS
          </a>
        </li>

        <li className="nav-item h-25 border-bottom">
          <a href="#" className="nav-link text-light pl-4">
            YOUR LIBRARY
          </a>
        </li>

        <li className="nav-item h-25 border-bottom">
          <a href="/login" className="nav-link text-light pl-4">
            LOGIN
          </a>
        </li>
        <li className="nav-item h-25 border-bottom">
          <a
            href="#"
            onClick={handleClick}
            className="nav-link text-light pl-4"
          >
            LOGOUT
          </a>
        </li>
      </ul>
    </nav>
    {isLoggedIn ? (
      <LoggedInNav
        handleClick={handleClick}
        isLoggedIn={isLoggedIn}
        email={email}
      />
    ) : (
      <div>
        {/* The navbar will show these links before you log in
        <a href="/login">Login(Spotify)</a>
        <Link to="/signup">Sign Up</Link> */}
      </div>
    )}
  </>
);

和我的 CSS:

.navbar {
  width: 210px;
  height: 100vh;
  position: fixed;
  /* margin-left: -300px; */
  background-color: darkgray;
}

这是我的应用目前的样子：

你可以看到密码表单，但是我的用户名表单被我的导航栏挡住了。

任何提示将不胜感激，谢谢！

Answer 1

使用 position: fixed; 从正常内容流中删除此元素。这意味着该元素现在可以位于其他元素之上（或之下）并且相对于 body.

定位

如果您想同时显示两者，最好的办法是在周围放置另一个 flex 容器（而不是片段）。

举个例子：https://codesandbox.io/s/sharp-mclean-tpropv

/* React */
import "./styles.css";

export default function App() {
  return (
    <div className="wrapper">
      <nav className="nav">Hello World</nav>
      <div className="other">Login Form</div>
    </div>
  );
}

/* CSS */
.wrapper {
  display: flex;
  height: 100vh;
}

.nav {
  width: 210px;
  height: 100vh;
  background-color: darkgray;
}

.other {
  /* ... */
}

文本隐藏在我的 Bootstrap 5 侧导航栏后面

Text hidden behind my Bootstrap 5 Side Navbar

css

css-position

reactjs

bootstrap-5