bootstrap4导航栏自定义

导航栏设置高度

//取消导航栏内边距
 .navbar{
     padding:0px 16px;
 }
 //设置导航栏背景色及添加阴影
 .navbar-setting{
    background-color: #40D2D1;
    /* height: 70px; */如果将这个效果放在navbar上，toggle会出问题
    box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.25);
 }
 //设置brand样式
 .navbar .navbar-brand{
    font-size: 25px;
    height: 60px;
    line-height: 50px;
    color:#fff;
 }
 

设置toggle样式

 //设置A链接样式
 .navbar-light .navbar-nav .nav-link{
     color:#fff;
     text-align: center;
     min-width: 120px;//如果这个地方直接写width会在窗口缩小时，按钮只显示120px的宽度样式，不是全屏都是
     height: 60px;//如果不设置，会导致toggle点击时发生位移
     line-height: 50px;
 }
 //鼠标经过时样式
 .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
    color:#fff;
    background-color: #0abde3;
  }
  //激活的样式~~~~
  .navbar-light .navbar-nav .active > .nav-link,
  .navbar-light .navbar-nav .nav-link.active {
    color: #fff;
    background-color: #0abde3;
  }

HTML代码

  

    

      Banner
      
        
      
  
      

        

          

            首页 (current)
          
          

            手机相展
          
          

            关于我们
          

        
        
      
    
  

最终样式