删除底部阴影引导导航栏答案

【问题标题】：Removing Bottom Shadow Bootstrap Navbar删除底部阴影引导导航栏
【发布时间】：2016-10-28 04:26:16
【问题描述】：

我正在为我的网站使用 Bootstrap 的 default navigation bar。我希望导航栏和导航栏下方的内容颜色相同，它们之间没有任何分界线。但是，导航栏底部似乎有一个我似乎无法摆脱的阴影。

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

我尝试在我怀疑（通过检查元素）可能导致此问题（.navbar、.navbar-default 和 .container-fluid）的每个导航栏类上设置 box-shadow: none; 无济于事。

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，但无法找到 box-shadow 的来源。

有谁知道我可以编写任何 CSS 来从导航栏底部移除这个阴影，这样导航栏与其余内容之间就没有分隔线了？

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

【问题讨论】：

您的代码或您的描述将帮助我们为您提供帮助，为我们提供现场演示，以便我们查看问题所在，默认引导 navbar 没有 box-shadow 适用于它。
@M.Tanzil 我猜 OP 使用 bootstrap-theme.min.css。
是的！ @Gleb 我可以在你的 sn-p 中看到 :)

标签： html twitter-bootstrap css navbar shadow

【解决方案1】：

如果您只想从 mdb-navbar 中删除 box-shadow，请执行以下操作，在 Angular 项目的 style.scss 文件中粘贴以下代码 .navbar{ box-shadow: none!important; }

【讨论】：

【解决方案2】：

只需在导航元素中添加“shadow-none”类

【讨论】：

这应该是最好的解决方案，因为最好不要将 css 与 bootstrap IMO 混合。更好地使用类。

【解决方案3】：

你可以试试这个链接，它有效。边界处有阴影。 https://getbootstrap.com/docs/4.3/utilities/shadows/

我试过这样，没有任何 CSS 作为上述解决方案。只需插入“shadow-none”作为文档。

<nav class="shadow-none navbar navbar-expand-sm  ">
</nav>

【讨论】：

【解决方案4】：

您需要确保 CSS 命令与浏览器兼容。浏览器兼容性说明如下。

-moz-appearance CSS 属性在 Gecko (Firefox) 中用于根据操作系统主题使用平台原生样式显示元素。

基于 WebKit（例如 Safari）和基于 Blink（例如 Chrome、Opera）的浏览器使用 -webkit-appearance 属性来实现相同的目的。请注意，出于兼容性原因，Firefox 和 Edge 也支持 -webkit-appearance。

 .navbar{
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
     box-shadow: none;
}

【讨论】：

【解决方案5】：

这个解决了我的问题。

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

【讨论】：

【解决方案6】：

不要认为引导导航栏上有框阴影但有边框你试过吗

.navbar-default{
  border:none;
}

【讨论】：

是的，不是边框阴影，而是边框本身。

【解决方案7】：

这段代码就够了：

.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>

【讨论】：