3

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

在此处输入图像描述

在 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, #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;
}
4

2 回答 2

10

您需要修复（您看到.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/

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

于 2013-09-27T07:19:17.227 回答
5

尼斯发现了问题

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

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

等等，给个小提琴

小提琴

于 2013-09-27T07:19:58.120 回答