Question

出于学习目的，现在，我只需要一个固定的顶部导航栏。我为上下文复制了大多数代码，但这只是关于（固定的）导航栏。导航栏不固定。我尝试使用CSS修复它，但没有任何结果或完全删除了导航栏。（例如：位置：固定；）。

在发布此帖子时，我刚刚意识到固定的含义可能与粘性的含义不同，但是我认为这就是固定导航栏的意义。向下滚动页面时始终可见。为什么此代码不起作用？

（例如，我的意思是http://getbootstrap.com/docs/3.3/examples/navbar-fixed-top/）

谢谢！

HTML

<div class="container-fluid">

    <div class="row">

        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-info">

        <nav class="navbar navbar-fixed-top">
            <div class="container-fluid">
            ... Content ...
            </div>
        </nav>

        </div>

        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-danger">
            <h2>A title/h2><br>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim dignissim leo vel semper. Proin lacinia magna eget lorem dictum, sed porttitor odio porttitor. Nullam scelerisque, mi nec aliquet dignissim, quam nibh tempor nisl, et fermentum erat mauris et lacus. In id neque a metus sollicitudin dapibus ac eu nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque massa eros, ultricies in metus et, malesuada ultricies magna. Ut cursus porta rhoncus. Maecenas condimentum erat sem, nec molestie justo lacinia eu. Quisque varius molestie finibus. Maecenas hendrerit est sed sapien varius maximus. Quisque consectetur nec enim vitae pellentesque. Aenean commodo ultricies odio vel bibendum.
            <br><br>
            Sed semper, tellus at maximus ultricies, odio sem vulputate nunc, non luctus orci dolor at justo. Sed maximus elit vitae maximus aliquam. Nunc sed lacinia sapien. Curabitur quis dui ac est vulputate fringilla. Curabitur ac consequat arcu. Nulla purus odio, hendrerit at justo a, rutrum faucibus diam. Quisque faucibus enim in tincidunt ornare. Fusce feugiat turpis ac neque pharetra, eget luctus arcu convallis. Aliquam vulputate ipsum lacus, nec volutpat nisi congue nec. Aliquam dapibus pretium dignissim. Phasellus in diam sit amet libero commodo feugiat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam ac tempor orci. In porta ex at ex dignissim dapibus.</p>
        </div>

        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-2 bg-warning">
            <h3>Title 2</h3><br>
            <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
            <br>
            <p>1</p><br>
            <p>2</p><br>
            <p>3</p><br>
            <p>4</p><br>
            <p>5</p><br>
        </div>

        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-2 bg-success">
            <h3>Title 3</h3><br>
            <p>Text</p>
            <br>
            <p>1</p><br>
            <p>2</p><br>
            <p>3</p><br>
            <p>4</p><br>
            <p>5</p><br>
        </div>

        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-info">
            <p>Footer</p>
        </div>

    </div>
</div>

<!-- Load Java scripts/jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>

使用Bootstrap固定顶部导航栏（4.1.3）

0 个答案: