我有一个使用以下代码的引导卡：
<div class="card card-outline-danger text-center">
<span class="pull-right clickable" data-effect="fadeOut"><i class="fa fa-times"></i></span>
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
我使用以下代码来使关闭按钮正常工作：
<span class="pull-right clickable" data-effect="fadeOut"><i class="fa fa-times"></i></span>
关闭按钮不起作用，我是引导程序新手。因此，我需要一些帮助。
这不是bootstrap的标准功能，所以你需要给图标绑定一个JS点击事件，并触发它来关闭父级.card。我还添加了cursor: pointer到图标，使其看起来像可以单击的东西。
$('.close-icon').on('click',function() {
$(this).closest('.card').fadeOut();
})
.close-icon {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="card card-outline-danger text-center">
<span class="pull-right clickable close-icon" data-effect="fadeOut"><i class="fa fa-times"></i></span>
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
