折叠组件 (bootstrap) 未显示，因为按钮位于其上方

Question

我正在构建一个响应式日历，上面有全角按钮（事件），它会显示额外的信息以及下方的折叠组件。但是按钮一直叠加显示，因此无法正确显示信息...

这是我的活动按钮之一：

<!--Event 1-->             
    <div class="div-event col-md-6">
      <span class="date-event col-xs-2 col-md-1"><span class="num-date-event">22</span><br>SEP</span>

      <button class="btn btn-event btn-block col-xs-8 col-md-4" type="button" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1">Kate's Super Party<br>at her house</button>

      <span class="glyphicon glyphicon-gift icon-event col-xs-2 col-md-1" aria-hidden="true"><span class="text-event"><br>PARTY</span></span>

      <div class="collapse" id="collapse-1"> 
        <div class="well">
        Hi, I'm a collapsable well that shows something but I can't be seen         because of the weird css I have!
        </div>
        </div>
          <div class="clearfix"></div>
    </div>

我试过使用 margin-top 和 position 但没有用。有没有办法 "separate" 从父行折叠？或者有其他方法可以做到吗？

这是完整的日历：https://jsfiddle.net/mrndrmrj/16/

Answer 1

在下面的 span 中添加 margin-bottom:10px

  <span class="glyphicon glyphicon-gift icon-event col-xs-2 col-md-1" aria-hidden="true"><span class="text-event"><br>PARTY</span></span>

Answer 2

好吧，我发现问题在于将事件与可折叠 "well" 分组，所以将井放在 div 事件之外就可以了！

这是更正的事件之一：

<!--Event 1-->  
<div class="div-event">
  <span class="date-event col-xs-2 col-md-2"><span class="num-date-event">22</span><br>SEP</span>

  <button class="btn btn-event btn-block col-xs-8 col-md-8" type="button" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1">Kate's Super Party<br>at her house</button>

  <span class="glyphicon glyphicon-gift icon-event col-xs-2 col-md-2" aria-hidden="true"><span class="text-event"><br>PARTY</span></span>

      <div class="clearfix"></div>
    </div>        

      <div class="collapse" id="collapse-1"> 
        <div class="well">
        Hi, I'm a collapsable well that shows something and now I can             be seen, but not the last two guys.
        </div>
      </div>

这是更新后的 fiddle，前两个事件已更正，后两个事件已更正，因此您可以看到区别...

https://jsfiddle.net/mrndrmrj/20/

折叠组件 (bootstrap) 未显示，因为按钮位于其上方

Collapse component (bootstrap) not showing because a button is over it

html

css

twitter-bootstrap

twitter-bootstrap-3

collapse