删除底部阴影引导导航栏

Maria 发表于 Dev

玛丽亚

我正在为我的网站使用Bootstrap的默认导航栏。我希望导航栏和导航栏下面的内容是相同的颜色，而它们之间没有任何界线。但是，导航栏底部似乎没有消除的阴影。

导航栏下的阴影

我正在使用Bootstrap的默认导航栏模板。

我试图设置box-shadow: none;在每个导航栏类我怀疑（从检查元件）可能会导致此（.navbar，.navbar-default，和.container-fluid）无济于事。

nav {
  box-shadow: none;
}
.navbar {
  .container-fluid {
    box-shadow: none;
  }
  box-shadow: none;
}

.navbar .navbar-collapse {
  box-shadow: none;
}

.navbar .navbar-nav {
  box-shadow: none;
}

.navbar-default {
  box-shadow: none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse"
              data-target=".navbar-collapse" 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 class="navbar-brand" href="#">LOGO-GOES-HERE</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="">LINK</a></li>
        <li><a href="">LINK</a></li>
        <li><a href="">LINK</a></li>
        <li><a href="">LINK</a></li>
        <li><a href="">LINK</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

我还查看了Bootstrap的CSS，但无法找到盒子阴影的来源。

有谁知道我可以写任何CSS来删除导航栏底部的阴影，从而使导航栏与内容的其余部分之间没有分隔线？

非常感谢您提前抽出宝贵的时间。

格莱布·凯玛斯基（Gleb Kemarsky）

这段代码就足够了：

.navbar-default {
  box-shadow: none;
}

但是请确保将代码放置到的链接之后bootstrap-theme.min.css。否则，您的更改将无效。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css');

.navbar-default {
  box-shadow: none;
}

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse"
              data-target=".navbar-collapse" 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 class="navbar-brand" href="#">LOGO-GOES-HERE</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="">LINK</a></li>
        <li><a href="">LINK</a></li>
        <li><a href="">LINK</a></li>
        <li><a href="">LINK</a></li>
        <li><a href="">LINK</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>