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

xienkqul  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(3)|浏览(221)

我试图通过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;
}

我意识到,用我为我的影子设置的当前像素尺寸,它看起来像一个实心块。我计划一旦我能让这个该死的东西工作,就进行调整。感谢任何帮助或指示。
非常爱你。

zu0ti5jz

zu0ti5jz1#

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

编辑

有一个很棒的在线工具可以生成box shadow代码(感谢cssmatic.com的工作人员),你可以调整你的shadow的外观,它会生成所有需要的代码加上任何特定的浏览器前缀(webkit,mozilla等),然后你可以把代码复制到你的css中。
http://www.cssmatic.com/box-shadow
你也可以在同一个网站上找到其他的css效果。

hmmo2u0o

hmmo2u0o2#

要保持导航栏中的阴影,只需调整框阴影属性

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

这里的第一个0px是使阴影在中心调整它得到右边和左边的阴影
8px为阴影的高度
之后8px-6px是阴影的硬度和不透明度
(0,0,0,0.5)是简单的RGBA(红、绿色、蓝、alpha)颜色和alpha,它是为了保持阴影的透明度,它从0.0(完全透明)到1.0(完全不透明)

jucafojl

jucafojl3#

您的navbar标记与默认的Bootstrap navbar标记稍有不同,例如,
您将整个navbar Package 在一个名为navbar-inner的类中,而不是将togglebrand Package 在一个navbar-header类中,后面跟着可折叠的menu-items
以下是您的标记应显示的内容:
第一个
此外,请将自定义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

相关问题