修改bootstrap导航栏样式(颜色，高)

提示：记录bootstrap导航栏样式(颜色，高)的修改

---

前言

在写自适应网页时想使用bootstrap实现，但与原稿的有一些差别，所以我们需要稍微修改，比如导航栏的样式

---

提示：本文仅供参考，代码如下：

一、bootstrap导航栏样式 (颜色，高) 的修改

.navbar {
    border-radius: unset; // 去除默认的导航栏弧度
    border: unset; // 去除默认的导航栏边框
    margin-bottom: 0;   // 去除默认的导航栏外边距 
}
// 修改导航栏背景颜色
.navbar-default {
    background-color: #fff;
}

// 以下是修改logo的位置
.navbar-header{
    line-height: 100px; // 此处是导航栏的高度
}
.navbar-header a{ 
    display: flex;
    height: 100px; // 此处是导航栏的高度
    align-items: center;
}
// 以下是修改移动端按钮的位置
.navbar-toggle{
    margin-top: 32px;   // 此处是(导航栏的高度 - 移动端按钮的高度) / 2
    margin-bottom: 32px;    // 此处是(导航栏的高度 - 移动端按钮的高度) / 2
}
// 以下是修改导航按钮相关样式
.navbar-nav>li>a {
    line-height: 66px;  // 此处是导航栏的高度 - 34px; 不确定是减34px
    font-size: 15px;    // 按钮字体大小
    font-weight: bold;  // 按钮字体加粗
    box-sizing: border-box; // 设置宽高包括边框
    height: 100px;  // 此处是导航栏的高度
    border-top: 4px solid transparent; // 字体不点击和不悬浮时边框的颜色
}

.navbar-default .navbar-nav>li>a {
    color: #292929; // 字体不点击、不悬浮时的颜色
}

.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
    color: #e14f60; // 字体点击和悬浮时的颜色
    border-top: 4px solid #e14f60; // 字体点击和悬浮时边框的颜色
}