Bootstrap菜单高度问题

时间:2017-02-09 14:19:03

标签: css twitter-bootstrap-3

您好我覆盖了部分bootstrap css以获得导航栏和颜色的高度。活动菜单项位于下方图像上。底部有一个像素大小差异,背景颜色显示。 有人知道怎么解决吗?我的scss代码在下面

Bootstrap active

$mainColor: #006600;
$navbarActive: yellowgreen;
$navbarDefault: white;
$navbarHooveer: yellowgreen;

body { padding-top: 13px; }

@media (min-width: 1040px) {
    .container{
    max-width: 1040px;
    }
}

.container-fluid {
    max-width: 1040px;
}

.navbar { min-height: 35px; }
.navbar .navbar-brand{ padding: 0px 0px;font-size: 16px; line-height:     35px; height: 35px; }
.navbar .navbar-nav { margin-left: 120px;}
.navbar .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 20px; height: 35px;}
.navbar .navbar-toggle {  margin-top: 3px; margin-bottom: 0px; }
.navbar .navbar-form { margin-top: 3px; margin-bottom: 0px; }
.navbar-nav > li > a { height: 35px; padding-top: 8px !important;     padding-bottom: 5px !important; }

.btn-success, .btn-success:hover, .btn-success:active, .btn-success:visited {
    background-color: $mainColor !important;
}

.navbar-default {
    background-color: $mainColor;
    border-color: $mainColor;
}
.navbar-default .navbar-brand {
    color: $navbarDefault;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: $navbarDefault;
}
.navbar-default .navbar-text {
color: $navbarDefault;
}
.navbar-default .navbar-nav > li > a {
color: $navbarDefault;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: $navbarHooveer;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: $navbarDefault;
    background-color: $navbarActive;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: $navbarDefault;
    background-color: $navbarActive;
    border-color: $navbarActive;
}
.navbar-default .navbar-toggle {
    border-color: $mainColor;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: $mainColor;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: $navbarDefault;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: $navbarDefault;
}
.navbar-default .navbar-link {
    color: $navbarDefault;
}
.navbar-default .navbar-link:hover {
    color: $navbarDefault;
}

2 个答案:

答案 0 :(得分:1)

很可能它只是一个边界:

.navbar {
    border: none;
}

答案 1 :(得分:0)

navbar-fixed-top有这种风格:

.navbar-fixed-top {
  top: 0;
  border-width: 0 0 1px;
}

您可以通过设置 border-width:0;

来覆盖它