Question

最近我使用的是bootstrap-4。我正在尝试制作一个导航栏，但问题是在响应视图中，当我切换导航栏时，它只是推动它下面的内容。有没有办法在（bootstrap-4）中解决这个问题。因此，导航栏始终位于每个内容的顶部，并且不会将内容推送到其下方。

 <nav class="navbar navbar-expand-sm bg-primary navbar-dark sticky-top">
    <div class="container">
        <a href="" class="navbar-brand">
            <img src="images/kick_ass_2.jpg" alt="" class="img-fluid img-thumbnail" style="width: 50px; height: 50px"/>
        </a>
        <button type="button" class="navbar-toggler" data-target="#mainMenu" data-toggle="collapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="mainMenu">
            <ul class="navbar-nav mr-auto">
                <li><a href="" class="nav-link">Home</a></li>
                <li><a href="test.html" class="nav-link">About</a></li>
                <li class="dropdown"><a href="" class="nav-link dropdown-toggle" data-toggle="dropdown">Service</a>
                    <ul class="dropdown-menu bg-primary">
                        <li><a href="test.html" class="nav-link">Service one</a></li>
                        <li><a href="test.html" class="nav-link">Service two</a></li>
                        <li><a href="test.html" class="nav-link">Service three</a></li>
                    </ul>
                </li>
                <li><a href="" class="nav-link">Gallery</a></li>
            </ul>
            <ul class="navbar-nav">
                <li><a href="" class="nav-link" data-toggle="modal" data-target="#loginModal">Login</a></li>
                <li><a href="" class="nav-link" data-toggle="modal" data-target="#signUpModal">Sign Up</a></li>
            </ul>
        </div>
    </div>
</nav>


<div id="mainSlider" class="carousel slide" data-ride="carousel" data-interval="3000">
    <ol class="carousel-indicators">
        <li data-target="#mainSlider" data-slide-to="0" class="active"></li>
        <li data-target="#mainSlider" data-slide-to="1"></li>
        <li data-target="#mainSlider" data-slide-to="2"></li>
        <li data-target="#mainSlider" data-slide-to="3"></li>

    </ol>

    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="images/kick_ass_2.jpg" alt="" class="w-100 img-hight"/>
            <div class="carousel-caption">
                <h3>Some content goes here</h3>
                <p>Some content goes here.Some content goes here.Some content goes here.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="images/shield_of_captain_america.jpg" alt="" class="w-100 img-hight"/>
            <div class="carousel-caption">
                <h3>Some content goes here</h3>
                <p>Some content goes here.Some content goes here.Some content goes here.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="images/max_payne_3_new.jpg" alt="" class="w-100 img-hight"/>
            <div class="carousel-caption">
                <h3>Some content goes here</h3>
                <p>Some content goes here.Some content goes here.Some content goes here.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="images/watchmen_smiley.jpg" alt="" class="w-100 img-hight"/>
            <div class="carousel-caption">
                <h3>Some content goes here</h3>
                <p>Some content goes here.Some content goes here.Some content goes here.</p>
            </div>
        </div>
    </div>
    <a href="#mainSlider" class="carousel-control-prev" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a href="#mainSlider" class="carousel-control-next" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

Answer 1

将'sticky-top'更改为'fixed-top'

<nav class="navbar navbar-expand-sm bg-primary navbar-dark fixed-top">

导航栏在响应视图中按下面的内容（Bootstrap 4）

1 个答案: