向引导站点添加框阴影 [关闭]答案

【问题标题】：Add a box-shadow to a bootstrap site [closed]向引导站点添加框阴影 [关闭]
【发布时间】：2015-07-03 10:57:00
【问题描述】：

我想在我的网站上添加一个使用引导程序的 box-shadow。我已将 box-shadow 应用于 body-content：

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

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

对此有标准解决方案吗？除了黑客，我什么都没发现。

编辑：很抱歉无法提供小提琴..

【问题讨论】：

标签： html twitter-bootstrap css

【解决方案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>

【讨论】：

感谢您的帮助，Manoj。我不希望导航栏和内容之间有空格，导航栏上的边框应该只在左右两侧。它应该看起来像一个盒子
看这里：stackoverflow.com/questions/11997032/…
另外，这些元素之间的空间仅在 sn-p 中，它不应该出现在您的网站上。
我已经编辑了代码并删除了间距。
Thomas，Hamish 在您的链接帖子中的解决方案使用了我无法使用的固定宽度。