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但它还没有奏效。有没有办法分开＆＃34;分开＆＃34;从父行崩溃？或者其他任何方式吗？

以下是完整日历：https://jsfiddle.net/mrndrmrj/16/

Answer 1

在以下范围内添加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

好吧，我发现问题是将事件与可折叠的“井”分组，所以把井放在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>

这是更新的小提琴，前两个事件已经纠正，最后两个错误，所以你可以看到差异......

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

折叠组件（引导程序）未显示，因为按钮位于其上方

2 个答案: