透明导航栏Bootstrap下方的白线

Question

由于某种原因，我的导航栏下面有一条线留在那里。它是固定的，所以当它向下滚动它停留。这是它的样子：

我不确定为什么。这是我的Nav HTML代码：

<nav class="navbar navbar-default navbar-fixed-top">
   <div class="container"> 
     <div class="navbar-header">  
     <a href="#" class="navbar-brand"> 
       <a class="navbar-brand" href="">
       <img id="brand-image" alt="Website Logo" src="https://s0.wp.com/wp-content/themes/vip/techcrunch-2013/assets/images/logo.svg"/> 
     </a>

     </div>

      <ul class="nav navbar-nav navbar-left">
         <li><a href="index.html"> Home </a></li>
         <li><a href="#"> Discover </a></li>
      </ul>


     <ul class="nav navbar-nav navbar-right">
       <li><a href="#"> Login </a></li>
       <li><a href="#"> Sign up </a></li>
     </ul>
</div>
</nav>

这是导航的CSS代码：

.navbar  {
background:none;

}

.navbar .nav > li > a {
  color:white;

}

.navbar-brand {
  padding: 0px;

}
.navbar-brand img {
  height: 100%;
  padding: 15px;
  width: auto;
}

Answer 1

将border: 1px solid transparent;添加到您的navbar规则。

您还有一个额外的a代码（<a href="#" class="navbar-brand">）。

工作示例（添加了移动切换功能）。

＆＃13;

＆＃13;

html,
body {
  background: darkblue;
}
/*THE ABOVE BACKGROUND RULE IS FOR DEMO ONLY*/

.navbar.navbar-default {
  background: none;
  border: 1px solid transparent;
}
.navbar.navbar-default .nav > li > a {
  color: white;
}
.navbar.navbar-default .navbar-brand {
  padding: 0px;
}
.navbar.navbar-default .navbar-brand img {
  height: 100%;
  padding: 15px;
  width: auto;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand">
        <img id="brand-image" alt="Website Logo" src="https://s0.wp.com/wp-content/themes/vip/techcrunch-2013/assets/images/logo.svg" />
      </a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-left">
        <li><a href="index.html"> Home </a>
        </li>
        <li><a href="#"> Discover </a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"> Login </a>
        </li>
        <li><a href="#"> Sign up </a>
        </li>
      </ul>
    </div>
  </div>

</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

如果您正在使用移动设备切换，则可以添加此项以从折叠中删除边框：

.navbar.navbar-default .navbar-collapse {
  border: 1px solid transparent;
}

工作示例：

＆＃13;

＆＃13;

html,
body {
  background: red;
}
/*THE ABOVE BACKGROUND RULE IS FOR DEMO ONLY*/

.navbar.navbar-default {
  background: none;
  border: 1px solid transparent;
}
.navbar.navbar-default .navbar-collapse {
  border: 1px solid transparent;
}
.navbar.navbar-default .nav > li > a {
  color: white;
}
.navbar.navbar-default .navbar-brand {
  padding: 0px;
}
.navbar.navbar-default .navbar-brand img {
  height: 100%;
  padding: 15px;
  width: auto;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand">
        <img id="brand-image" alt="Website Logo" src="https://s0.wp.com/wp-content/themes/vip/techcrunch-2013/assets/images/logo.svg" />
      </a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-left">
        <li><a href="index.html"> Home </a>
        </li>
        <li><a href="#"> Discover </a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"> Login </a>
        </li>
        <li><a href="#"> Sign up </a>
        </li>
      </ul>
    </div>
  </div>

</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是Bootstrap的<ul> <li *ngFor="let i of items; let last = last">{{i}} {{last ? callFunction(i) : ''}}</li> </ul> 的白色边框。只需删除该类，或将shouldDoIt = true; // initialize it to true for the first run callFunction(stuff) { if (this.shouldDoIt) { // Do all the things with the stuff this.shouldDoIt = false; // set it to false until you need to trigger again } } 放入.navbar-default样式中。