2017-02-09 8 views
1

こんにちは、私は、navbarと色の高さを得るためにブートストラップCSSの一部を上書きしました。アクティブなメニュー項目が下の画像にあります。 1つのピクセルサイズの違いがあり、背景色が下に表示されます。 誰かがそれを修正する方法を知っていますか?ブートストラップメニューの高さの問題

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; 
} 

答えて

1

それだけで国境の最も可能性の高い下記のマイSCSSコード:

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

は、あなたがそれを上書きすることができます。

.navbar { 
    border: none; 
} 
+0

これは動作します:) – mysiar

0

ナビゲーションバーに固定されたトップは、このスタイルを持っていますborder-width:0;