2013-09-27 2 views
3

Основание на этом fiddle. Как удалить белую линию .. я пытался изменить цвет нав-бар, но есть белая линия, когда его на мобильныйBootstrap 3 Изменение цвета на панели навигации, показывающее белую рамку или белую линию

enter image description here

на бутстраповского-theme.css я есть добавлены и Editted некоторые коды

добавил

код и Editted на начальной загрузки темы

.navbar { 
    /* 
    background-image: -webkit-gradient(linear, left 0%, left 100%, from(#3B5998), to(#f8f8f8)); 
    background-image: -webkit-linear-gradient(top, #3B5998, 0%, #f8f8f8, 100%); 
    background-image: -moz-linear-gradient(top, #3B5998 0%, #f8f8f8 100%); 
    background-image: linear-gradient(to bottom, #3B5998 0%, #f8f8f8 100%); 
    background-repeat: repeat-x; 
    border-radius: 4px; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0); 
    */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3B5998', endColorstr='#fff8f8f8', GradientType=0); 
    -webkit-box-shadow: inset 0 1px 0 rgba(59,89,152, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075); 
    box-shadow: inset 0 1px 0 rgba(59,89,152, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075); 

    border-radius: 4px; 
    background-color:#3B5998; 
} 

.navbar .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus { 
    background-color: #3B5998; 
    color:#e7e7e7; 
} 

.navbar-brand, 
.navbar-nav > li > a { 
    /*text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);*/ 
} 

.navbar-default .navbar-brand, 
.navbar-default .navbar-nav > li > a { 
    color: #ffffff; 
} 

.navbar-default .navbar-brand:hover, 
.navbar-default .navbar-brand:focus , 
.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-nav > li > a:focus { 
    color: #ffffff; 
    background-color: transparent; 
} 

.navbar-default .navbar-nav > .dropdown > a .caret{ 
    border-top-color: #ffffff; 
    border-bottom-color: #ffffff; 
} 

.navbar-default .navbar-nav > .dropdown > a:hover .caret, 
.navbar-default .navbar-nav > .dropdown > a:focus .caret { 
    border-top-color: #ffffff; 
    border-bottom-color: #ffffff; 
} 

.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus { 
    color: #3B5998; 
    background-color: #ffffff; 
} 

.navbar-default .navbar-nav > .open > a .caret, 
.navbar-default .navbar-nav > .open > a:hover .caret, 
.navbar-default .navbar-nav > .open > a:focus .caret { 
    border-top-color: #3B5998; 
    border-bottom-color: #3B5998; 
} 

ответ

9

Вы должны установить верхнюю границу .navbar-collapse (это Bootstrap-х #e6e6e6 цвет границы вы видите):

.navbar-default div.navbar-collapse 
{ 
    border-top:none; 
    box-shadow:none; 
} 

После отключения его border-top:none вы еще заметите немного тусклые линии, которая является, потому что есть box-shadow правило, вам необходимо изменить его тоже с box-shadow:none.

Живая скрипка: http://jsfiddle.net/keaukraine/ZfYNG/

В этой скрипке вы найдете 2 способа фиксации верхней границы - установив его цвет #3b5998 и полностью отключить его.

5

Nice нашел вопрос

.navbar-collapse{ 
border-top:0px !important; 
box-shadow:none; 
} 

после анимации он добавляет рамку Вверх

ждать, плохо дать скрипку

fiddle

Смежные вопросы