Html 使用Bootstrap 3.0，在<；部门>；及<；专家组>；

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

点击

下面是我的html代码

---

类

.mask

、

.stationBox

和

.stationContent

都具有

位置：相对
。这将为它们提供常规布局，然后对它们进行定位，留下空白

不要给这些类一个
位置：相对的
尝试给它们一个
位置：绝对的
，将它们定位到
.col-md-8
，给所有类一个
顶部：160px

或者更好的方法是，将这些
移动到
.stationPhoto
（它会得到一个
位置：relative
）中，并根据该位置对它们进行定位。
您已经给出了位置：relative并移动了它，这就是空间可见的原因位置：relative离开了空间，并将内容向上移动，这样才有效！但我发现.mask的宽度超出了范围。右边的col-md-8和左边的col-md-8处于正确的位置，而给出的位置：绝对会合适。col-md-8。将.mask的宽度设置为90%可能有效，但不是最佳解决方案。我怎样才能解决这个问题？（您可以通过上面的链接单击我的演示）您可以尝试通过设置
左：0
，
右：0
&
边距：0 15px
来修复它，但将站点图像的所有元素放在一个容器中并将其放在
col-md-8
中可能是一个更简单的方法。
    <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>

.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;
}