导航栏设置高度
//勾销导航栏内边距 .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>最终款式