gpt4 book ai didi

html - Bootstrap Collapse - 无动画

转载 作者:太空宇宙 更新时间:2023-11-04 07:51:49 27 4
gpt4 key购买 nike

我正在通过单击 Font Awesome 库中的图标在我的网站上实现 Bootstrap Collapse。当我按下它时,内容会折叠起来,但没有动画,只是弹出。我做错了什么?

这是 my code

<div class="container col-sm-12 banner">
<i class="fa fa-plus" aria-hidden="true" data-toggle="collapse" data-target="#moreInfo"></i>
</div>
<div id="moreInfo" class="collapse">
<div class="hiddenInfo">
123
</div>
</div>

最佳答案

由于您对 Bootstrap 的网格系统的实现不当,您遇到了冲突。 .container.col-sm-12 不能以这种方式组合;它会导致一系列与过渡效果冲突的 float 错误。

一旦您正确实现了 Bootstrap 的网格(并解决了您的其他 float 的明显问题),过渡动画就会按预期进行。

.banner {
background-color: #1194f0;
padding: 20px;
}

.banner i {
font-size: 40px;
float: right;
line-height: 50px;
}

.hiddenInfo {
background-color: black;
color: white;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="banner clearfix">
<i class="fa fa-plus" aria-hidden="true" data-toggle="collapse" data-target="#moreInfo"></i>
</div>
</div>

<div class="col-sm-12">
<div id="moreInfo" class="collapse">
<div class="hiddenInfo">
123
</div>
</div>
</div>
</div>
</div>

关于html - Bootstrap Collapse - 无动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47703154/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com