Bootstrap 3导航栏更改颜色原因显示白色边框或白线

Question

基于这个小提琴.我如何删除白线..我试图改变导航栏的颜色,但它在移动时有一条白线

在bootstrap-theme.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;
}

Answer 1

你需要修复.navbar-collapse(#e6e6e6你看到它的Bootstrap的边框颜色)的顶部边框:

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

在禁用它之后,border-top:none你仍然会注意到一条略微暗淡的线,因为有一条box-shadow规则,你需要用它来覆盖它box-shadow:none.

活小提琴:http://jsfiddle.net/keaukraine/ZfYNG/

在这个小提琴中你会发现两种固定顶部边框的方法 - 通过设置其颜色#3b5998并完全禁用它.

Answer 2

尼斯发现了这个问题

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

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

等待生病给小提琴

小提琴