基于此
fiddle.我如何删除白线..
我试图改变导航栏的颜色,但是当它在移动设备上时有一条白线
我试图改变导航栏的颜色,但是当它在移动设备上时有一条白线
在bootstrap-theme.css上
我添加并编辑了一些代码
.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,#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',GradientType=0);
-webkit-Box-shadow: inset 0 1px 0 rgba(59,89,152,0.15),0 1px 5px rgba(0,0.075);
Box-shadow: inset 0 1px 0 rgba(59,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,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;
}
解决方法
您需要修复.navbar-collapse的顶部边框(它是您看到的Bootstrap的#e6e6e6边框颜色)：
.navbar-default div.navbar-collapse
{
border-top:none;
Box-shadow:none;
}
在使用border-top：none禁用它后,您仍然会注意到一条略微暗淡的线,这是因为存在一个盒子阴影规则,您需要使用Box-shadow：none来覆盖它.
活小提琴：http://jsfiddle.net/keaukraine/ZfYNG/
在这个小提琴中你会发现两种固定顶部边框的方法 – 将其颜色设置为#3b5998并完全禁用它.
