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

问题描述

基于此小提琴.我如何去除白线..我尝试更改导航栏的颜色，但在移动设备上时会出现一条白线

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.cssi have added and editted some codes

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

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

推荐答案

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

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

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

在使用border-top:none禁用它之后，您仍然会看到一条暗线，这是因为存在box-shadow规则，您也需要使用box-shadow:none覆盖它.

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

实时提琴: http://jsfiddle.net/keaukraine/ZfYNG/

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

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

这篇关于Bootstrap 3导航栏更改颜色导致显示白色边框或白线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！