Question

这是我要修复的div，我应该在哪里添加固定顶部的bootstrap类。

我已经检查了大多数地方是否添加了它，但是我无法正确显示它？请帮助

<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>

Answer 1

尝试添加navbar-fixed-top类：

.content {
  height: 1000px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main_section_agile" id="home">
    <div class="agileits_w3layouts_banner_nav ">
        <nav class="navbar navbar-default navbar-fixed-top"><!-- Class added here -->
            <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 class="content"></div>
</div>

Answer 2

要能够将导航栏修复到页面顶部，您需要使用可用的引导程序类，例如：

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

，并使用导航栏固定在底部class="navbar fixed-bottom" 有关更多信息，请查看bootstrap navbar

无法将导航栏设置为固定？

2 个答案: