twitter-bootstrap 如何向引导卡添加关闭按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43970878/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add close button to bootstrap card?
提问by WOW
I have a bootstrap card using the following code:
我有一个使用以下代码的引导卡：
<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>
I am using the following code to get my close button working:
我正在使用以下代码让我的关闭按钮工作：
<span class="pull-right clickable" data-effect="fadeOut"><i class="fa fa-times"></i></span>
The close button is not working and I am new to bootstrap. Therefore, I need some help.
关闭按钮不起作用，我是引导程序的新手。因此，我需要一些帮助。
回答by Michael Coker
This isn't a standard feature of bootstrap, so you need to bind a JS click event to the icon, and trigger it to close the parent .card. I also added cursor: pointerto the icon so that it looks like something you can click on.
这不是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>