Бутстрап 3 Нав-бар изменение цвета причина, показывающие белой каймой или белую линию
Опираться на этускрипку . как удалить белую линию?. Я попытался изменить цвет навигационной панели, но есть белая линия, когда его на мобильном телефоне
На тему bootstrap.CSS я добавил и отредактировал некоторые коды
Код добавлен и отредактирован на тему bootstrap
.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;
}
2 ответа:
Вам нужно исправить верхнюю границу
.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
и полностью отключив ее.