引导阴影不适用于网格系统

ToyRobotic 发表于 Dev

玩具机器人

我对Twitter的引导程序有疑问。我想为我的项目使用box-shadow，但是它不起作用。当我将box-shadow命令放在css文件中的相关类下时，什么也没发生。

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

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

杰森

我不会格式化您的网格。我会留给你。但是就阴影而言，只需在顶级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;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。