代码之家 › 专栏 › 技术社区 › Zaki Hussain

jumbotron顶部的引导导航栏(覆盖)

navbar bootstrap-4 twitter-bootstrap css html

Zaki Hussain · 技术社区 · 6 年前

我试图将导航栏放在我的Jumbotron封面上(我使用的是引导CSS),但我无法将其(导航栏)放在背景透明的Jumbotron封面上。

如有帮助,将不胜感激:-)

以下是我的HTML代码:

<nav class="navbar navbar-expand-md navbar-light">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
            <a class="nav-link" href="/home.php">Item 1</a></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="">Item 2</a>
        </li>
    </ul>
</div>

<div class="mx-auto order-0">
    <a class="navbar-brand mx-auto" href="/home.php">
      <img src="/images/logo.svgs" height="35" alt="">Logo
    </a>
</div>

<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
    <ul class="navbar-nav ml-auto">
        <li class="nav-item">
            <a class="nav-link" href="#">Page 1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Page 2</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Page 3</a>
        </li>
    </ul>
</div>
</nav>

<section class="cover jumbotron jumbotron-fluid" id="cover">
<div class="container-fluid">
  <div class="row">
    <div class="cover-text col-5">
      <h1 class="display-4">LOREM IPSUM TITLE</h1>
      <p class="lead">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
        convallis pellentesque metus id lacinia.
      </p>
    </div>

    <div class="col-1">
    </div>

    <div class="col-6">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
          <p class="card-text">
            Some quick example text to build on the card title and make up
            the bulk of the card's content.
          </p>
          <a href="#" class="card-link">Card link</a>
        </div>
      </div>
    </div>
  </div>
</div>
</section>

下面是它的外观图片: home-page

2 回复 | 直到 6 年前

Carol Skelly 6 年前

使用 fixed-top 导航栏组件 explained in the docs 。。。

<nav class="navbar navbar-expand-md navbar-light fixed-top">
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="/home.php">Item 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="">Item 2</a>
            </li>
        </ul>
    </div>

    <div class="mx-auto order-0">
        <a class="navbar-brand mx-auto" href="/home.php">
            <img src="/images/logo.svgs" height="35" alt="">Logo
        </a>
    </div>

    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Page 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Page 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Page 3</a>
            </li>
        </ul>
    </div>
</nav>

<section class="cover jumbotron jumbotron-fluid" id="cover">
    <div class="container-fluid">
        <div class="row">
            <div class="cover-text col-5">
                <h1 class="display-4">LOREM IPSUM TITLE</h1>
                <p class="lead">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis pellentesque metus id lacinia.
                </p>
            </div>

            <div class="col-1">
            </div>

            <div class="col-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">
                            Some quick example text to build on the card title and make up the bulk of the card's content.
                        </p>
                        <a href="#" class="card-link">Card link</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

https://www.codeply.com/go/dGengaALpm

rakesh shrestha 6 年前

您尚未关闭导航部分。这可能会导致不必要的问题。