如何在css/bootstrap中實現面板重疊？

Question

我試圖做到這一點：

我想三塊板灰色<div>有白色的超大屏幕上方它們重疊。我如何在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>