【问题标题】: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。我不希望导航栏和内容之间有空格,导航栏上的边框应该只在左右两侧。它应该看起来像一个盒子
    • 另外,这些元素之间的空间仅在 sn-p 中,它不应该出现在您的网站上。
    • 我已经编辑了代码并删除了间距。
    • Thomas,Hamish 在您的链接帖子中的解决方案使用了我无法使用的固定宽度。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-06-16
    • 2012-02-19
    相关资源
    最近更新 更多