使用 Bootstrap 3.0，<div>在 和 <panel-groups>之间出现异常空格

Question

我正在做一个在col-md-8框架中使用bootstrap的网站。起初，我在图片上放了一张带有电台名称和图标的电台图片。然后下面包含了它所属的每一个类别，但发现它们之间有一个白色块。我在Chrome 39中使用了开发工具，但找不到原因。删除了"stationContent"、"stationBox"one_answers"mask"后，白色块终于消失了。现在，我使用top属性来控制"面板组"作为临时解决方案。有人能解释一下吗？如有任何建议，我们将不胜感激。

通过PhoneGap 点击Google Drive上的演示

Bellowing是我的html代码

<div class="stationPhoto">
</div>
<div class="mask">
<div class="bluredBackground"></div>
</div>
<div class="stationBox">
</div>
<div class="stationContent">
<h1>五塊厝</h1>
<img src="img/icons/001.png">
</div>  
<!-- content -->
<!-- where white block appears -->
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true" style="z-index: 9999;">
<div class="panel panel-default">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<div class="panel-heading" role="tab" id="headingOne" style="background-color:#f2f2f2">
<h4 class="panel-title">美食</h4>
</div>
</a>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="list-group">
<ul class="nav nav-tabs nav-stacked">
<li><a href="#">Angoli Brunch</a></li>
<li><a href="#">豬肉蔥油餅</a></li>
<li><a href="#">CHACOMACA</a></li>
</ul>
</div>
</div>
</div>
<!-- another category -->
</div>

波纹管是我的css代码

.stationPhoto{
background-image: url("img/spots/002.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 240px;
z-index: 1;
-webkit-box-shadow: 0px -20px ;
}
.mask{
position: relative;
width: 100%;
height: 80px;
top: -80px;
z-index: 3;
overflow: hidden;
}
.bluredBackground{
width: 100%;
height: 100%;
top: -200%;
padding-top: 100%;
display: block;
background-image: url("img/spots/002.jpg");
background-repeat: no-repeat;
background-size: 100%;  /* width must fit the column width */
z-index: 4;
position: absolute;
-webkit-filter: blur(5px);
}
.stationBox{
position: relative;
padding-top: 5px;
padding-bottom: 5px;
top: -160px;
left: 0px;
right: 0px;
z-index: 10;
border-radius: 5px;
background-color: #000000;
opacity: 0.2;
height: 80px;
}
.stationContent h1{
color:#fff; 
margin-left:40px;
text-shadow: 2px 2px 7px #000000;
width: 50%;
display: inline-block;
}
.stationContent img{
display: inline-block;
margin-bottom: 12px;
}
.stationContent{
width: 100%;
position: relative;
top: -240px;
z-index: 10;
}
.panel-group{
position: relative;
}
footer{
margin-top: 10px;
display: block;
clear:both;
text-align: center;
padding-bottom: 20px;
z-index: 3;
}    

Answer 1

类.mask、.stationBox和.stationContent都有position: relative。这给了它们规则的布局，然后对它们进行定位，留下空白。

与其给这些类一个position: relative，不如试着给它们一个position: absolute，将它们定位到.col-md-8，并给所有类一个top: 160px。

或者更好的是，将这些<div>移动到.stationPhoto(它得到一个position: relative)中，并根据它来定位它们。