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

sdnqo3pr 于 2022-11-27 发布在其他

关注(0)|答案(2)|浏览(132)

我正在构建一个响应式日历，它上面有全宽按钮（事件），它显示额外的信息，下面有折叠组件。但是按钮总是重叠显示，所以它不能正确显示信息...
这是我的一个事件按钮：

<!--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，但是没有效果。有没有办法将折叠从父行中“分离”出来？或者有没有其他办法？
以下是完整的日历：https://jsfiddle.net/mrndrmrj/16/

css

来源：https://stackoverflow.com/questions/32708362/collapse-component-bootstrap-not-showing-because-a-button-is-over-it

2条答案

按热度按时间

wqnecbli1#

在以下范围中添加边距-底部：10 px

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

赞(0）回复(0）举报 2022-11-27

r6hnlfcb2#

好吧，我发现问题是将事件与可折叠的“well”组合在一起，所以将well放在div-event之外就可以了！
这是已更正的事件之一：

<!--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/

展开查看全部

赞(0）回复(0）举报 2022-11-27

我来回答

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

2条答案

相关问题

热门标签

最新问答