SOURCE

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">    
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
      <!-- 品牌标志 -->
      <a class="navbar-brand" href="#">Scrollspy test</a>
      
      <!-- 导航栏显示隐藏按钮 -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon">
          <i class="fa fa-align-justify"></i>
        </span>
      </button>
      <div class="navbar-collapse collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="#fat">@fat</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#mdo">@mdo</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#final">Final</a>
          </li>
        </ul>
      </div>
    </nav>
    

*{
  margin: 0;
  padding: 0;
}
a{
  text-decoration: none;
  color: #007bff;
  &:hover, &:focus{
    text-decoration: underline;
  }
}
ul, ol{
  list-style: none;
}
.bg-dark{
  background-color: #333333;
  transition: background-color .5s ease;
}
.navbar{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: .5rem 1rem;
}

.navbar-brand{
  display: inline-block;
  padding-top: .5rem;
  padding-bottom: .5rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  &:hover{
    text-decoration: none;
  }
}
/* 暗黑主题*/

.navbar-dark{
  .navbar-brand{
    color: #fff;
    &:hover,&:focus{
      color: #fff;
    }
  }
  
  .navbar-nav{
    display: flex;
    padding-left: 0;
    padding-right: 0;
    flex-direction: column;
    margin-bottom: 0;
    .nav-link{
      color: rgba(#fff, 0.8);
      &:hover, &:focus{
        color: rgba(#fff, .9);
      }
    }
  }
  .nav-item{
    padding-left:0;
    padding-right: 0;
    margin-bottom: 0;
  }
  .navbar-toggler{
    padding: .25rem .75rem;
    font-size: 1.4rem;
    line-height: 1;
    background: transparent;
    color: rgba(#fff, 0.8);
    border-color: rgba(#fff, .1);
    border-radius: .25rem;
    cursor: pointer;
  }
  .navbar-toggler-icon{
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: middle;
  }
}
.fixed-top{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}
/* 响应式 默认折叠菜单 */
.collapse{
  height : 0;
  overflow: hidden;
  transition: height .5s ease;
}

// 默认撑大
.navbar-collapse{
  flex: 1 0 100%;
}

// 响应式部分
.navbar-expand-md{
  @media (min-width: 576px){
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    // 菜单不再占据一行
    .navbar-collapse{
      display: flex;
      flex-basis: auto;
      height: auto;
      align-items: center;
    }
    // 隐藏弹出菜单按钮
    .navbar-toggler{
      display: none;
    }
    .navbar-nav{
      flex-direction: row;
      align-items: center;
    }
    .nav-item{
      padding: .25rem .5rem;
    }
  }
}