Бутстрап 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 3

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 и полностью отключив ее.

Nice нашел проблему

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

После анимации он добавляет верхнюю границу

Подождите, я дам скрипку

Скрипка