Question

我想在我的网站上添加一个使用bootstrap的box-shadow。我在身体内容中应用了一个盒子阴影：

.body-content {
    background-color: white; 
    box-shadow:0 0 25px hsla(0, 0%, 0%, 0.60);
}

但是，我还需要导航栏上的阴影，因为目前它看起来像这样：

有没有标准的解决方案？除了黑客之外，我什么都没找到。

编辑：很抱歉没能提供小提琴..

Answer 1

将.navbar和.body-content包裹在div中，将box-shadow应用于父div。

.shadow-container {
  box-shadow: 0 0 25px hsla(0, 0%, 0%, 0.60);
}
.body-content {
  background-color: white;
  box-shadow: 0 0 25px hsla(0, 0%, 0%, 0.60);
  padding: 15%;
  text-align: center;
}
.navbar {
  margin: 0 !important; /* Avoid !important, added here for priority in snippet */
  border-bottom: 0 !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="shadow-container">
    <nav class="navbar navbar-default">

      <div class="navbar-header">
        <a class="navbar-brand" href="#">
          <img alt="Brand" src="...">
        </a>
      </div>
    </nav>


    <div class="body-content">
      Rest of the content
    </div>
  </div>
</div>

将一个box-shadow添加到bootstrap站点

1 个答案: