Html 使用 Bootstrap 将阴影添加到顶部固定的导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14904731/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add a drop shadow to a top-fixed nav bar using Bootstrap
提问by Brian
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.
我试图通过 Bootstrap 为我的导航栏添加阴影，但我似乎无法弄清楚。也许有人可以指出我正确的方向。我见过的所有其他关于类似主题的问题都有令人难以置信的冗长混乱代码的回答，但必须有一种简单的方法来做到这一点，毕竟这不是 Bootstrap 的全部意义所在。
Here's my HTML relating to my nav:
这是与我的导航相关的 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 -->
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.
慕乔爱。
回答by moeabdol
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 效果。
回答by AndrewL64
Your navbar markup is a bit different from the default Bootstrap navbar markup, for example,
您的导航栏标记与默认的 Bootstrap 导航栏标记略有不同，例如，
You wrapped your whole navbar in a class named navbar-innerinstead of wrapping the toggle and brand inside a navbar-headerclass followed by the collapsible menu-items after.
您将整个导航栏包装在一个名为的类中，navbar-inner而不是将切换和品牌包装在一个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 custom css file belowyour bootstrap css file to avoid your styles being overwritten by bootstrap' default styling.
将您的自定义 css 文件保存在bootstrap css 文件下方，以避免您的样式被 bootstrap 的默认样式覆盖。
<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-->
