首页 > 解决方案 > 无法将导航栏设置为固定?

问题描述

这是我想固定到顶部的 div,我应该在哪里添加固定顶部的引导类。

我已经检查了在大多数地方都添加了它,但我无法正确使用它?请帮忙

<div class="main_section_agile" id="home">
    <div class="agileits_w3layouts_banner_nav">
        <nav class="navbar navbar-default">
            <div class="navbar-header navbar-left">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <h1><a class="navbar-brand" href="index.html"><i class="fa fa-leanpub" aria-hidden="true"></i> scholarly</a></h1>

            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
                <nav class="link-effect-2" id="link-effect-2">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="index.html" class="effect-3">Home</a></li>
                        <li><a href="#about" class="effect-3 scroll">About Us</a></li>
                        <li><a href="#services" class="effect-3 scroll">Services</a></li>
                        <li><a href="#team" class="effect-3 scroll">Team</a></li>
                        <li><a href="#gallery" class="effect-3 scroll">Gallery</a></li>
                        <li><a href="#mail" class="effect-3 scroll">Mail Us</a></li>
                    </ul>
                </nav>

            </div>
        </nav>  
        <div class="clearfix"> </div> 
    </div>
</div>

标签: htmlcsstwitter-bootstrap

解决方案


为了能够将导航栏固定到页面顶部,您需要使用可用的引导类,例如:

<nav class="navbar fixed-top navbar-light bg-light">
    <a class="navbar-brand" href="#">Fixed top</a>
</nav>

并且要在底部固定导航栏以class="navbar fixed-bottom"获取更多信息,请查看引导导航栏


推荐阅读