这不是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>
好吧,自从提出这个问题以来已经过去了一段时间,但仍然是实现可关闭卡片的好方法,无需任何自定义 JavaScript,仅使用 Bootstrap CSS 类,如下所示:
card-header
、Bootstrap 4 关闭图标的组合和 .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">×</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 中的实际关闭事件。
HTH,
汉森
要真正关闭卡片,我们可以使用 BS4 Data-API 并将以下数据属性放入按钮标签中:data-dismiss="alert" data-target="#closeablecard"。 data-target 是我们卡的 ID,data-dismiss=alert 会触发 Bootstrap 中的实际关闭事件。
通过, 拉古尔·K