Question

我遇到了twitters bootstrap的问题。我想为我的项目使用box-shadow，但它不起作用。当我把box-shadow命令放在css文件中的相关类下时没有任何事情发生。

它应该像图片一样工作，阴影位于标题，导航栏和内容之下。

http://www.directupload.net/file/d/3889/it2wsmgr_jpg.htm

*{
  border-radius: 0 !important;
  -moz-border-radius: 0 !important;
}
.navbar-header {
    height: 247px;
    background: black;
    -webkit-box-shadow: 7px 7px 2px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    7px 7px 2px 0px rgba(50, 50, 50, 0.75);
     box-shadow:         7px 7px 2px 0px rgba(50, 50, 50, 0.75);

}
.navbar {
    height:74px;
    background:#F7a717;
    /* Muss überschrieben werden, sonst ist ein Abstand zwischen den Spalten */
    margin:0px;
    position: relative;
    
    
    
}
.nav {
    font-size: 26px;
}
.nav li {
    display:inline-block;
    
}
.nav li a:hover {
    background:yellow;
    color:white;
}
.content {
    height: 954px;
    background:#eff3fb;

}
.footer {
    height: 284px;
    background:#254175;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Track DB</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
     <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
<div class="container-fluid">
      <div class="row">
          <div class="col-md-12 navbar-header">

          </div>
      </div>
     
      <div class="row">
          <div class="col-md-8 navbar navbar-left drop-shadow">
                <ul class=" nav">
                    <li><a href="#">Navigation1</a></li>
                    <li><a href="#">Navigation2</a></li>
                    <li><a href="#">Navigation3</a></li>
                    <li><a href="#">Navigation4</a></li>
                </ul>
          </div>
          <div class="col-md-3 navbar">
              <form class="navbar-form navbar-left" role="search">
                  <input type="text" name="search" class="form-control input-lg" id="search" placeholder="Search">
              </form>
          </div>
          <div class="col-md-1 navbar navbar-right drop-shadow">

          </div>
      </div>
      <div class="row">
          <div class="col-md-12 content"></div>
      </div>
      <div class="row">
          <div class="col-md-12 footer">

          </div>
      </div>
</div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  </body>
</html>

PS：对不起我的英语，我正在努力

Answer 1

我不会格式化你的网格。我会留给你的。但就影子而言，只需在顶级div上使用更高的z-index。

http://jsfiddle.net/f8mrno19/1/

.navbar-header {
    z-index:9999;
    height: 247px;
    background: black;
    -webkit-box-shadow: 7px 7px 2px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 7px 7px 2px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 7px 7px 2px 0px rgba(50, 50, 50, 0.75);
}
.drop-shadow{
    box-shadow: 0px 7px 5px #888888;
    z-index:999;
}

bootstrap shadow不适用于网格系统

1 个答案: