html - bootstrap html css 切换更多信息 div

Question

如果我有一个 <div class="parent"></div>我想制作这种类型的卡片，因此我需要在卡片底部添加一个 plus。按钮。单击加号按钮时，将切换显示另一个 div，该按钮将变为 minus .单击减号按钮时，将切换附加 div 以隐藏返回初始阶段。我正在使用 Bootstrap ，需要在一行中创建这些卡片。所有元素必须在同一 parent 内分区

是这样的:请注意这 3 张图片显示了单张卡片的事件生命周期。

我的问题是:如何让按钮位于底部边框的中央，并在框展开时同时保持边框在那里？

我的尝试:jsFiddle

Answer 1

您的尝试奏效了。它只是看起来不正确。您需要在单击按钮时显示的 div 上有一个 clearfix，因为您使用的是左拉和右拉，它们使用向左浮动和向右浮动。这是一个工作 fiddle :
https://jsfiddle.net/njzskdqr/

阅读更多关于 clearfix 的信息:
https://css-tricks.com/snippets/css/clear-fix/

只需将类 cf 添加到具有类折叠的父类

.cf::before, .cf::after{
  display: table;
  content: '';
}

.cf::after{
  clear:both;
}