如何在css / bootstrap中实现面板重叠？

Question

我正在努力实现这一目标：

我希望灰色<div>中的三个面板与它们上面的白色jumbotron重叠。如何在CSS或Bootstrap中执行此操作？

HTML：

<div id="home-page">
  <div class="container text-center">
    <div class="row">

      <div class="col-sm-4">
        <div class="panel">
        </div>
      </div>
      <div class="col-sm-4">
        <div class="panel">
        </div>
      </div>
      <div class="col-sm-4">
        <div class="panel">
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <h3>Passionate About Technology?</h3>
    <p>We make and effort to learn something everyday</p>
    <a href="/rush" class="btn btn-danger text-center" id="learn-btn">LEARN</a>
  </div>
</div>

CSS

#home-page        { background: #EFEFEF; }
#home-page .panel { box-shadow: 0px 0px 10px gray; margin: 15px; }

谢谢！

Answer 1

我能够通过对代码进行一些调整来复制您的照片：

这是css：

 #home-page {
   background: #EFEFEF; 
 }

  #home-page .panel {
     box-shadow: 0px 0px 10px gray;
     margin: 15px;
     margin-top:-50px; 
     height:200px;
  }

 #jumbo{
    height:100px;
 }

我还在顶部添加了一个div以获得该效果

<div id="jumbo"></div>

请看我的codepen http://codepen.io/sammyb123/pen/dMJaRw

Answer 2

在整页中查看以下代码段。如果您希望在较小的设备上使用相同的效果，请改用col-xs。

#home-page .panel {
  box-shadow: 0px 0px 10px gray;
  height: 250px;
  margin-top: -15px;
}
#home-page .jumbo-ctr {
  background: #fff;
  margin-bottom: 20px;
}
#home-page .panel-ctr {
  background: #EFEFEF;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />



<div id="home-page">
  <div class="container jumbo-ctr">
    <h3>Passionate About Technology?</h3>
    <p>We make and effort to learn something everyday</p>
    <a href="/rush" class="btn btn-danger text-center" id="learn-btn">LEARN</a>
  </div>

  <div class="container-fluid text-center panel-ctr">
    <div class="row">

      <div class=" col-sm-offset-3  col-sm-2 ">
        <div class="panel">
        </div>
      </div>
      <div class="col-sm-2 ">
        <div class="panel">
        </div>
      </div>
      <div class="col-sm-2 ">
        <div class="panel"></div>
      </div>
    </div>
  </div>


</div>