将透明导航栏放在 jumbotron 顶部 - Bootstrap

Question

我正在尝试制作一个顶部有一个大的 jumbotron 并在其顶部放置一个透明导航栏的登录页面，如下所示：https://stripe.com/en-gb-dk。 jumbotron 只是有一个彩色背景（即没有背景图像）。我试过fixed-top，达到了预期的效果；但是，我对固定在顶部的导航栏不感兴趣（即跟随滚动页面）-我只对位于 jumbotron 顶部的透明导航栏感兴趣。有谁知道我如何使用引导程序来实现这一目标？谢谢！

以下是我的代码（我将 Bootstrap 与 React 结合使用）

导航栏：

<nav className={`navbar navbar-expand-md navbar-light bg-transparent`}>
  <div className="container-fluid">
    <a className="navbar-brand">
      <img src="/images/logo.png" alt="" className="img-fluid" />
    </a>
    <button
      onClick={() => setShowMenu(!showMenu)}
      className="navbar-toggler"
      type="button"
      data-toggle="collapse"
      data-target="#navbarNavAltMarkup"
      aria-controls="navbarNavAltMarkup"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span className="navbar-toggler-icon"></span>
    </button>
    <div className={`collapse navbar-collapse ${showMenu ? "show" : ""}`}>
      <div className="navbar-nav mx-auto">
        <li className="nav-item active">
          <a className="nav-link" href="#">
            Link 1
          </a>
        </li>
        <li className="nav-item active">
          <a className="nav-link" href="#">
            Link 2
          </a>
        </li>
        <li className="nav-item active">
          <a className="nav-link" href="#">
            Link 3
          </a>
        </li>
      </div>
      <div className="nav navbar-nav nav-right">
        <li className="nav-item active">
          <a className="nav-link" href="#">
            Link 4
          </a>
        </li>
      </div>
    </div>
  </div>
  <style jsx>
    {`
      .navbar .navbar-collapse {
        text-align: center;
      }
      @media (min-width: 992px) {
        .nav-right {
          float: right;
        }
      }
    `}
  </style>
</nav>

巨无霸：

<section> 
<div className="main-jumbotron">
  <h1>Let us help you find your next  expert</h1>
  <h4>
    At beautykonect, we have the best  experts ready to help you
  </h4>
  <div className="text-center mt-5">
    <button className="btn btn-primary btn-lg outline">Get started</button>
  </div>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 100 100"
    preserveAspectRatio="none"
  >
    <polygon fill="white" points="0,100 100,0 100,100" />
  </svg>
</div>
<style jsx>
  {`
    svg {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 10vw;
    }
    .main-jumbotron {
      position: relative;
      height: 90vh;
      min-height: 300px;
      background: rgb(255, 216, 223);
      background: linear-gradient(
        90deg,
        rgba(255, 216, 223, 1) 0%,
        rgba(252, 189, 201, 1) 53%,
        rgba(255, 134, 157, 1) 100%
      );
    }
    .main-jumbotron h1 {
      padding-top: 125px;
      text-align: center;
      color: white;
      font-weight: 700;
    }
    .main-jumbotron h4 {
      color: white;
      margin-top: 25px;
      font-weight: 600;
      text-align: center;
    }
    .btn.outline {
      background: none;
      padding: 12px 22px;
    }
    .btn-primary.outline {
      border: 2px solid #fff;
      color: #fff;
    }
    .btn-primary.outline:hover,
    .btn-primary.outline:focus,
    .btn-primary.outline:active,
    .btn-primary.outline.active,
    .open > .dropdown-toggle.btn-primary {
      color: rgba(252, 189, 201, 1);
      border-color: #fff;
      background-color: #fff;
    }
    .btn-primary.outline:active,
    .btn-primary.outline.active {
      border-color: #007299;
      color: #007299;
      box-shadow: none;
    }
  `}
</style>
<section> 

This is what it looks like now

然后我想要做的是使导航栏透明并将横幅/jumbotron向上推，这样页面顶部就没有白色部分

编辑：添加代码和照片

Answer 1

Bootstrap 提供了一个实用程序类 position-absolute，它可以提供所需的结果，但它没有类来处理特定的定位属性，例如顶部。

此解决方案遵循与示例相同的方法，在导航栏的内联样式中应用此新样式规则：

.navbar {
        position: absolute; // could use 'position-absolute' on navbar instead
        top: 0;
        left: 0;
        width: 100%; // could also use class 'w-100' on navbar instead
}