bootstrap html css 切换更多信息 div

Question

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

内

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

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

我的尝试：jsFiddle

Answer 1

使用 position: absolute 作为图标按钮..

.btn.btn-info {
    position: absolute;
    z-index: 1;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
}

http://www.codeply.com/go/6TS1fcsXi6

Answer 2

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

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

只需使用 class collapse

将 class cf 添加到父级

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

.cf::after{
  clear:both;
}