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，因为你正在使用向左拉和右拉使用向左浮动和向右浮动。这是一个工作小提琴：
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;
}