25.Bootstrap(中文教程)元件：navbar:导栏列位置固定

ㄧ.导栏列位置固定

<div class="component demo" style="height:300vh">  <nav class="navbar sticky-top navbar-expand-md navbar-light bg-light">    <a href="#" class="nav-bar-brand">ninghao</a>    <button class="navbar-toggler" data-toggle="collapse" data-target="#navbar-content">      <span class="navbar-toggler-icon"></span>    </button>    <div class="collapse navbar-collapse" id="navbar-content">      <ul class="navbar-nav">        <li class="nav-item"><a href="#" class="nav-link">学习</a></li>        <li class="nav-item"><a href="#" class="nav-link">社区</a></li>        <li class="nav-item"><a href="#" class="nav-link">博客</a></li>      </ul>    </div>      </nav></div>.demo.component{  padding: 50px;  padding-top: 80vh;}

重点：

1.nav的.sticky-top需要在上面有个图片会是留白，捲轴拉下来导栏列会固定在顶部
2. .sticky-top可改成.fixed-top直接固定顶部
3.加入顶端内留白是为了模拟上面有广告等等之类的，拉下捲轴让导栏列固定到顶端

codepen
参考：bootstrap4