我试图通过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;
}
我意识到,用我为我的影子设置的当前像素尺寸,它看起来像一个实心块。我计划一旦我能让这个该死的东西工作,就进行调整。感谢任何帮助或指示。
非常爱你。
3条答案
按热度按时间zu0ti5jz1#
在css中,将以下内容添加到.navbar类规则中
编辑
有一个很棒的在线工具可以生成box shadow代码(感谢cssmatic.com的工作人员),你可以调整你的shadow的外观,它会生成所有需要的代码加上任何特定的浏览器前缀(webkit,mozilla等),然后你可以把代码复制到你的css中。
http://www.cssmatic.com/box-shadow
你也可以在同一个网站上找到其他的css效果。
hmmo2u0o2#
要保持导航栏中的阴影,只需调整框阴影属性
这里的第一个
0px
是使阴影在中心调整它得到右边和左边的阴影则
8px
为阴影的高度之后
8px
和-6px
是阴影的硬度和不透明度(0,0,0,0.5)
是简单的RGBA(红、绿色、蓝、alpha)颜色和alpha,它是为了保持阴影的透明度,它从0.0(完全透明)到1.0(完全不透明)jucafojl3#
您的
navbar
标记与默认的Bootstrapnavbar
标记稍有不同,例如,您将整个
navbar
Package 在一个名为navbar-inner
的类中,而不是将toggle
和brand
Package 在一个navbar-header
类中,后面跟着可折叠的menu-items
。以下是您的标记应显示的内容:
第一个
此外,请将自定义
css
文件保存在引导css
文件之下,以避免您的样式被引导的默认样式覆盖。下面是一个具有上述代码的jsfiddle。