Web前端WEB前端程序开发web前端

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

2018-01-03  本文已影响28人  廖马儿

固定在顶部: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
上一篇下一篇

猜你喜欢

热点阅读