Question

我试图在导航栏下方创建一个带有滑块的页面，但该滑块位于导航栏的后面。

我在网上搜索，然后看到另一个问题，回答是说要在身体上增加上边距，它起作用了，但是当您更改幻灯片时，它开始上下颠簸，这是“上边距”的错误。 / p>

    <div>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
            <div class="container">
                <a class="navbar-brand js-scroll-trigger" href="#page-top">
                    <img alt="Brand" src="Resources/img/logo.png">
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link js-scroll-trigger" href="#about">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link js-scroll-trigger" href="#services">Informatica</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link js-scroll-trigger" href="#contact">Contatti</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
    <div id="sliderImmagini" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
        <li data-target="#sliderImmagini" data-slide-to="0" class="active"></li>
            <li data-target="#sliderImmagini" data-slide-to="1"></li>
            <li data-target="#sliderImmagini" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src="Resources/img/slider/slide-1.jpg" alt="First slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="Resources/img/slider/slide-2.jpg" alt="Second slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="Resources/img/slider/slide-3.jpg" alt="Third slide">
            </div>
        </div>
        <a class="carousel-control-prev" href="#sliderImmagini" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Precendente</span>
        </a>
        <a class="carousel-control-next" href="#sliderImmagini" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Prossimo</span>
        </a>
    </div>

因此，现在我仍然在导航栏后面停留有滑块，感谢您的帮助。

Answer 1

如果您知道.navbar的高度，则可以在margin-top上设置.carousel，以将其向下压下一页。这是因为.navbar是固定的。这意味着您可以向下滚动页面，并将.navbar留在页面顶部。

示例：

.navbar{
  border:3px solid orange;
}
.carousel{
  border: 3px solid green;
  margin-top: 70px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->


<div>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
            <div class="container">
                <a class="navbar-brand js-scroll-trigger" href="#page-top">
                    <img alt="Brand" src="Resources/img/logo.png">
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link js-scroll-trigger" href="#about">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link js-scroll-trigger" href="#services">Informatica</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link js-scroll-trigger" href="#contact">Contatti</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
</div>
<div id="sliderImmagini" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
        <li data-target="#sliderImmagini" data-slide-to="0" class="active"></li>
            <li data-target="#sliderImmagini" data-slide-to="1"></li>
            <li data-target="#sliderImmagini" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src="https://i.cdn.turner.com/ads/adspaces/CNN/2018/12/10/840622774_LoveGilda_CNNFilms_1100x619_NewYearsDay.jpg" alt="First slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="https://cdn.cnn.com/cnnnext/dam/assets/181220163944-01-week-in-photos-1221-super-169.jpg" alt="Third slide">
            </div>
        </div>
        <a class="carousel-control-prev" href="#sliderImmagini" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Precendente</span>
        </a>
        <a class="carousel-control-next" href="#sliderImmagini" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Prossimo</span>
        </a>
    </div>
    <p>
    lkjsdlkajsdlkjalskdjlakjsd
    </p>
        <p>
    lkjsdlkajsdlkjalskdjlakjsd
    </p>    <p>
    lkjsdlkajsdlkjalskdjlakjsd
    </p>    <p>
    lkjsdlkajsdlkjalskdjlakjsd
    </p>    <p>
    lkjsdlkajsdlkjalskdjlakjsd
    </p>    <p>
    lkjsdlkajsdlkjalskdjlakjsd
    </p>

Bootstrap滑块位于导航栏后面

1 个答案: