在顶部固定的导航条上添加一个投影

I'm attempting to add a drop shadow to my nav bar I have through Bootstrap, but I can't seem to figure it out. Maybe somebody can point me in the correct direction. All the other questions I've seen that have been asked about a similar topic have incredibly lengthy responses of messy code, but there has to be a simple way to do it, isn't that the whole point of Bootstrap after all.

我想在我的导航条上添加一个投影，但是我好像搞不清楚。也许有人能指点我正确的方向。我所见过的关于类似主题的所有其他问题都有令人难以置信的冗长的代码响应，但是必须有一个简单的方法来完成，这不是引导的全部意义。

Here's my HTML relating to my nav:

这是我的HTML与我的nav有关:

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

And here's my CSS relating to the 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;
}

I'm aware that with the current px dimensions I have set for my shadow it will appear like a solid block. I plan on adjusting once I can get this dang thing to work. Thanks for any help or pointers.

我知道我为我的影子设置了当前的px尺寸，它会看起来像一个实体块。我计划一旦我能让这个该死的东西发挥作用就进行调整。谢谢你的帮助和指点。

Mucho love.

大爱。

2 个解决方案

#1

In your css add the following to your .navbar class rule

在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 */
}

EDIT

There is an awesome online tool to generate box shadow code (thanks to the folks at cssmatic.com). You can adjust the way your shadow looks and it will generate all the code needed plus any specific browser prefixes (webkit, mozilla, etc.). You then can copy the code into your css.

有一个很棒的在线工具可以生成暗箱代码(感谢cssmatic.com的工作人员)。您可以调整影子的外观，它将生成所需的所有代码以及任何特定的浏览器前缀(webkit、mozilla等)。然后可以将代码复制到css中。

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

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

You can also find other css effects in the same site.

您还可以在同一个站点中找到其他css效果。

#2

Your navbar markup is a bit different from the default Bootstrap navbar markup, for example,

您的导航条标记与默认的Bootstrap navbar标记略有不同，例如，

You wrapped your whole navbar in a class named navbar-inner instead of wrapping the toggle and brand inside a navbar-header class followed by the collapsible menu-items after.

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

Here's how your mark-up should look like:

你的薪水应该是这样的:

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

Here's a jsfiddle with above codes: https://jsfiddle.net/AndrewL32/e0d8my79/36/

下面是一个jsfiddle代码:https://jsfiddle.net/AndrewL32/e0d8my79/36/

Also,

同时,

keep your costom css file below your bootstrap css file to avoid your styles being overwritten by bootstrap' default styling.

将你的costom 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-->