删除底部阴影Bootstrap Navbar

Question

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

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

有没有人知道我可以编写的任何CSS来删除导航栏底部的阴影，以便导航栏与其他内容之间没有分隔线？

非常感谢您提前的时间。

Answer 1

这段代码就足够了：

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

Answer 2

不要认为引导导航栏上有一个盒子阴影，但是你试过边框

.navbar-default{
  border:none;
}

Answer 3

您需要确保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;
}

Answer 4

这个解决了我的问题。

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

Answer 5

您可以尝试此链接，它可以工作。边界有阴影。 https://getbootstrap.com/docs/4.3/utilities/shadows/

我像这样尝试，没有上面的解决方案。只需插入“无阴影”即可。

new GoogleMap(
    padding: EdgeInsets.only(bottom: 100, left: 15), // <--- padding added here
    // rest of parameters
    // ....
)

Answer 6

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

Answer 7

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