twitter-bootstrap Bootstrap 3 Nav-bar 更改颜色导致显示白色边框或白线

Bootstrap 3 Nav-bar change color cause showing a white border or white line

提问by Snippet

Base on this fiddle. how do i remove the white line.. I tried to change the color of the nav-bar but there is a white line when its on mobile

基于这个小提琴。我如何删除白线.. 我试图更改导航栏的颜色，但在移动设备上时有一条白线

on the bootstrap-theme.css i have added and editted some codes

在 bootstrap-theme.css 上，我添加并编辑了一些代码

Code added and editted on bootstrap theme

在引导程序主题上添加和编辑代码

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

回答by keaukraine

You need to fix top border of .navbar-collapse(it's Bootstrap's #e6e6e6border color you see):

您需要修复的顶部边框.navbar-collapse（#e6e6e6您看到的是 Bootstrap 的边框颜色）：

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

After disabling it with border-top:noneyou will still notice a slightly dim line which is because there is a box-shadowrule, you need to override it too with box-shadow:none.

禁用它后，border-top:none您仍然会注意到一条稍微暗淡的线，这是因为有一条box-shadow规则，您也需要使用box-shadow:none.

Live fiddle: http://jsfiddle.net/keaukraine/ZfYNG/

现场小提琴：http: //jsfiddle.net/keaukraine/ZfYNG/

In this fiddle you will find 2 ways of fixing top border - by setting its color to #3b5998and completely disabling it.

在这个小提琴中，您将找到 2 种固定顶部边框的方法 - 通过将其颜色设置为#3b5998并完全禁用它。

回答by Anobik

Nice found the issue

很好找到问题

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

after animation it adds a border top

动画后它添加了一个边框顶部

wait ill give a fiddle

等待生病给小提琴

fiddle

小提琴