Bootstrap3 - 12.固定在顶部或者底部的导航栏

固定在顶部:navbar-fixed-top
固定在底部:navbar-fixed-bottom

在页面顶部:navbar-static-top 会跟着滚动而滚动,不会固定在screen。

eg:

<nav class="navbar navbar-inverse navbar-fixed-top">

<nav class="navbar navbar-inverse navbar-fixed-top">
        <a href="#" class="navbar-brand">www.<strong>google</strong>.com</a>
        <ul class="nav navbar-nav">
            <li class="active"><a href="">课程</a></li>
            <li><a href="">博客</a></li>
            <li><a href="">手册</a></li>
        </ul>
    </nav>
    <div class="container"> 
        <div>
            <h1>title</h1>
            <p>按时打算杀对方的方式斯蒂芬斯蒂芬按时打算</p>
        </div>
    </div>

我们在浏览器上面:


图片.png

看到的问题就是:
Navbar挡住了我们的container容器。

我们需要在自己的自定义css文件中写样式:

body {
    padding-top: 52px;  # 我们在样式调节上看到的navbar的高度是52px
}

效果:


图片.png

navbar底部的话:

<nav class="navbar navbar-inverse navbar-fixed-bottom">

效果:


图片.png

代码:

navbar-static-top

效果:


图片.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容