如何将关闭按钮添加到引导卡？答案

【问题标题】：How to add close button to bootstrap card?如何将关闭按钮添加到引导卡？
【发布时间】：2020-11-02 22:49:52
【问题描述】：

我有一张使用以下代码的引导卡：

 <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>

关闭按钮不起作用，我是引导程序的新手。因此，我需要一些帮助。

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

这不是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>

【讨论】：

【解决方案2】：

好的，自从提出这个问题以来已经过去了一段时间，但仍然是实现无需任何自定义 JavaScript 且仅使用 Bootstrap CSS 类的可关闭卡片的好方法如下：card-header、the Bootstrap 4 Close Icon 和 @ 的组合987654322@（此处为.mt-n5）card-body。关闭图标很好地定位在卡片标题中，负边距将卡片内容拉近标题区域。

<div class="container">
  <div id="closeablecard" class="card card-hover-shadow mt-4">
    <div class="card-header bg-transparent border-bottom-0">
      <button data-dismiss="alert" data-target="#closeablecard" type="button" class="close" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="card-body mt-n5">
      <h5 class="card-title">Your Title</h5>
      <p class="card-text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem recusandae voluptate porro suscipit numquam distinctio ut. Qui vitae, ut non inventore necessitatibus quae doloribus rerum, quaerat commodi, nemo perferendis ab.
      </p>
      <a href="#" class="card-link">Card link</a>
      <a href="#" class="card-link">Another link</a>
    </div>
  </div>
</div>

要真正关闭卡片，我们可以使用 BS4 Data-API 并将以下数据属性放在按钮标签中：data-dismiss="alert" data-target="#closeablecard"。 data-target 是我们卡片的 ID，data-dismiss=alert 会触发 Bootstrap 中的实际关闭事件。

See a Demo on JSFiddle...

HTH，
汉森

【讨论】：