引导html css切换更多信息div

如果我有一张

卡，我想制作这种类型的卡，以便在卡的底部添加一个

加上
按钮。单击加号按钮时，将切换另一个div以显示，该按钮将变为
减号。单击减号按钮时，将切换附加div以隐藏返回初始阶段。我正在使用引导，需要在一行内创建这些卡。所有元素必须在同一个
parent
div中

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

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

我的尝试：

使用图标按钮的
位置：绝对值

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

使用图标按钮的
位置：绝对值

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

您的尝试成功了。只是看起来不太对劲。您需要在单击按钮时显示的div上有一个clearfix，因为您使用的是pull left和pull right，它们使用float left和float right。这是一把小提琴：



阅读有关clearfix的更多信息：


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

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

.cf::after{
  clear:both;
}

你的尝试成功了。只是看起来不太对劲。您需要在单击按钮时显示的div上有一个clearfix，因为您使用的是pull left和pull right，它们使用float left和float right。这是一把小提琴：



阅读有关clearfix的更多信息：


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

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

.cf::after{
  clear:both;
}

@ZimSystem：请检查JSFIDLE链接。谢谢。那么问题是什么？这是切换其他卡还是更改+/-图标的问题？@ZimSystem：正如您从图片中看到的，即使在切换“更多信息”部分时，图标也必须保持在底部边框的中心。在我的尝试中，边框向下移动，而不是停留在同一个位置。好的，你能编辑并澄清问题是关于按钮的位置吗？目前这个问题太广泛了。@ZimSystem:请检查JSFIDLE链接。谢谢。那么问题是什么？这是切换其他卡还是更改+/-图标的问题？@ZimSystem：正如您从图片中看到的，即使在切换“更多信息”部分时，图标也必须保持在底部边框的中心。在我的尝试中，边框向下移动，而不是停留在同一个位置。好的，你能编辑并澄清问题是关于按钮的位置吗？目前这个问题太宽泛了。我如何保持底部边界的位置？当前，单击按钮时，底部边框会随着“更多信息”框展开。底部边框应保持不变，底部应显示“更多信息”框，使人感觉是两个框而不是一个框。就像我在上面发布的图片，第2步，主信息框和更多信息框之间有一个边框。你需要给它一个设定的高度。我如何保持底部边框的位置？当前，单击按钮时，底部边框会随着“更多信息”框展开。底部边框应保持不变，底部应显示“更多信息”框，使人感觉是两个框而不是一个框。就像我在上面发布的图片，第2步，主信息框和更多信息框之间有一个边框。你需要给它一个设定的高度