如何在bootstrap卡上添加关闭按钮？

Question

我有一个使用以下代码的bootstrap卡:

 <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的新手.因此,我需要一些帮助.

Answer 1

这不是引导程序的标准功能,因此您需要将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>