40

我正在尝试通过 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 尺寸，它看起来像一个实心块。一旦我可以让这该死的东西发挥作用，我计划进行调整。感谢您的任何帮助或指点。

多爱。

4

3 回答 3

73

在您的 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 效果。

于 2015-05-26T18:19:55.437 回答
5

要在导航栏中保持阴影，只需调整 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（完全不透明）

于 2020-06-06T18:18:29.653 回答
2

您的导航栏标记与默认的 Bootstrap 导航栏标记有点不同，例如，

您将整个导航栏包装在一个名为的类中，navbar-inner而不是将切换和品牌包装在一个navbar-header类中，然后是可折叠的菜单项。

您的标记应如下所示：

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

这是一个带有上述代码的jsfiddle：https ://jsfiddle.net/AndrewL32/e0d8my79/36/

还，

将您的自定义 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-->
于 2015-03-31T19:44:24.150 回答