关于bootstrap: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款式

 /**toggle*/
 //设置A链接款式
 .navbar-light .navbar-nav .nav-link{
     color:#fff;
     text-align: center;
     min-width: 120px;//如果这个中央间接写width会在窗口放大时，按钮只显示120px的宽度款式，不是全屏都是
     height: 60px;
     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代码

<!-- 导航 -->
  <nav class="navbar navbar-expand-lg navbar-light navbar-setting ">
    <div class="container">
      <a class="navbar-brand" href="#">Banner</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
  
      <div class="collapse navbar-collapse nav-right" id="navbarsExample07">
        <ul class="navbar-nav  ml-auto">
          <li class="nav-item ">
            <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#">手机相展</a>
          </li>
          <li class="nav-item">
            <a class="nav-link"  href="#" >对于咱们</a>
          </li>

        </ul>
        <!-- <form class="form-inline my-2 my-md-0">
          <input class="form-control" type="text" placeholder="Search" aria-label="Search">
        </form> -->
      </div>
    </div>
  </nav>

最终款式