使用Bootstrap将阴影添加到顶部固定的导航栏

Question

我正试图通过Bootstrap为我的导航栏添加一个投影,但我似乎无法弄明白.也许有人可以指出我正确的方向.我所看到的所有其他问题都被问到一个类似的话题,对于凌乱的代码有着令人难以置信的冗长反应,但必须有一个简单的方法来做到这一点,毕竟不是Bootstrap的重点.

这是我与导航相关的HTML:

<div class="navbar navbar-inverse navbar-fixed-top" id="custom-nav">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="index.html">eService</a>
      <div class="nav-collapse">
        <ul class="nav pull-right">
          <li><a href="index.html">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="contact.html">Contact</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  Services
                  <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">Stage Design & Build</a></li>
              <li><a href="#">Event Planning & Management</a></li>
              <li><a href="#">Video Production</a></li>
              <li><a href="#">Audio Production</a></li>
              <li><a href="#">Lighting Production</a></li>
            </ul>
          </li><!-- dropdown -->
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  Events
                  <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">Corporate Events</a></li>
              <li><a href="#">Civic Events</a></li>
              <li><a href="#">Charity Events</a></li>
              <li><a href="#">Grand Openings</a></li>
              <li><a href="#">Concerts</a></li>
            </ul>
          </li><!-- dropdown -->
        </ul><!-- /.nav -->
      </div><!--/.nav-collapse -->
    </div><!-- /.container -->
  </div><!-- /.navbar-inner -->
</div><!-- /.navbar -->

这是我与导航栏相关的CSS:

#custom-nav {
    -webkit-box-shadow: 20px 20px 20px #FC0;
    -moz-box-shadow:    20px 20px 20px #FC0;
    box-shadow:         20px 20px 20px #FC0;
    z-index:999;
}

我知道,对于我为阴影设置的当前px尺寸,它看起来像一个坚固的块.我计划调整一次,我可以让这个dang的东西工作.感谢您的帮助或指示.

Mucho爱.

Answer 1

在您的CSS中,将以下内容添加到.navbar类规则中

.navbar {
    -webkit-box-shadow: 0 8px 6px -6px #999;
    -moz-box-shadow: 0 8px 6px -6px #999;
    box-shadow: 0 8px 6px -6px #999;

    /* the rest of your styling */
}

编辑

有一个很棒的在线工具来生成盒子阴影代码(感谢cssmatic.com上的人们).您可以调整阴影的外观,它将生成所需的所有代码以及任何特定的浏览器前缀(webkit,mozilla等).然后,您可以将代码复制到您的CSS中.

http://www.cssmatic.com/box-shadow

您还可以在同一站点中找到其他CSS效果.

Answer 2

要在导航栏中保持阴影，只需调整 box-shadow 属性

.navbar{
    box-shadow: 0px 8px 8px -6px rgba(0,0,0,.5);
    }

这里首先0px是将中间的阴影调整为左右阴影

那么，8px是阴影的高度

之后8px并且-6px为阴影的硬度和不透明度

(0,0,0,0.5)是简单的 rgba(red,green,blue,alpha) 颜色和alpha，它是为了保持阴影的透明度，它从0.0（完全透明）到1.0（完全不透明）

Answer 3

您的navbar标记与默认的 Bootstrap 标记有点不同navbar，例如，

您将整个内容包装navbar在一个名为 的类中，navbar-inner而不是将toggle和包装brand在一个navbar-header类中，然后是可折叠的menu-items。

您的标记应如下所示：

#custom-nav {
  -webkit-box-shadow: 20px 20px 20px #FC0;
  -moz-box-shadow: 20px 20px 20px #FC0;
  box-shadow: 20px 20px 20px #FC0;
  z-index: 999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- CSS only -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js" crossorigin="anonymous" defer></script>

<div class="navbar navbar-inverse navbar-fixed-top" id="custom-nav" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
             <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="#">eService</a>
  </div>
  <div class="collapse navbar-collapse" id="example-navbar-collapse">
    <ul class="nav navbar-nav">
      <li><a href="index.html">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                      Services
                      <b class="caret"></b>
                </a>
        <ul class="dropdown-menu">
          <li><a href="#">Stage Design & Build</a></li>
          <li><a href="#">Event Planning & Management</a></li>
          <li><a href="#">Video Production</a></li>
          <li><a href="#">Audio Production</a></li>
          <li><a href="#">Lighting Production</a></li>
        </ul>
      </li>
      <!-- dropdown -->
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                      Events
                      <b class="caret"></b>
                </a>
        <ul class="dropdown-menu">
          <li><a href="#">Corporate Events</a></li>
          <li><a href="#">Civic Events</a></li>
          <li><a href="#">Charity Events</a></li>
          <li><a href="#">Grand Openings</a></li>
          <li><a href="#">Concerts</a></li>
        </ul>
      </li>
      <!-- dropdown -->
    </ul>
    <!-- /.nav -->
  </div>
</div>

另外，请将自定义css文件保留在引导程序文件下方css，以避免您的样式被引导程序的默认样式覆盖。

<link rel="stylesheet" type="text/css" href="bootstrap.css"> <!--call your bootstrap first-->
<link rel="stylesheet" type="text/css" href="mystyle.css"><!-- followed by your custom css after-->

这是包含上述代码的jsfiddle。