Question

我有一个使用以下代码的自举卡：

 <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

这不是bootstrap的标准功能，因此您需要将JS click事件绑定到该图标，并触发它以关闭父.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>

Answer 2

好的，自提出这个问题以来已经过了一段时间，但是以下是在没有任何自定义JavaScript且仅具有Bootstrap CSS类的情况下实现可废弃卡的好方法：card-header，{{3的组合}}和.mt-n5上的the Bootstrap 4 Close Icon（此处为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中的实际关闭事件。

negative margins ...

HTH，
亨森

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

2 个答案: