html - Bootstrap Accordion 中的 Twitter 分享按钮不显示
问题描述
使用引导程序 4。
我想在每个手风琴项目展开时显示一个 Twitter 的“分享”按钮。
我可以让按钮显示在手风琴外面,而不是在里面。
我认为它与class=="collapse"
手风琴上的有关<div>
,因为当我删除它时,按钮会显示。我已经在我的代码中证明了这一点,class="collapse"
已经从一个手风琴项目中删除并且它可以工作。
我的代码在下面,还有一个链接 a fiddle。
我已经评论了显示按钮在哪里工作和不工作的代码。
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<div class="row">
<div class="col-md-12">
<div id="accordion" role="tablist">
<!-- works here outside accordion -->
<a href="https://twitter.com/intent/tweet?button_hashtag=share&ref_src=twsrc%5Etfw" class="twitter-hashtag-button" data-show-count="false">Tweet #share</a>
<div class="card list-view-brand">
<div class="card-header" role="tab">
<p title="Click to expand">
<a data-toggle="collapse" id="#4367" href="#4367" aria-expanded="false" aria-controls="4367" class="collapsed">
item 1
</a>
</p>
</div>
<div id="4367" class="" role="tabpanel" data-parent="#accordion" style="">
<div class="card-body">
<ul class="list-group mb-3">
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<small class="text-muted">ID</small>
<p class="my-0">4367</p>
</div>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<small class="text-muted">Language</small>
<p class="my-0">fre</p>
</div>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<!-- works here when class="collapse" removed from parent div -->
<a href="https://twitter.com/intent/tweet?button_hashtag=share&ref_src=twsrc%5Etfw" class="twitter-hashtag-button" data-show-count="false">Tweet #share</a>
</li>
</ul>
</div>
</div>
</div>
<div class="card list-view-brand">
<div class="card-header" role="tab">
<p title="Click to expand">
<a data-toggle="collapse" id="#4368" href="#4368" aria-expanded="false" aria-controls="4368" class="collapsed">
item 2
</a>
</p>
</div>
<div id="4368" class="collapse" role="tabpanel" data-parent="#accordion" style="">
<div class="card-body">
<ul class="list-group mb-3">
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<small class="text-muted">ID</small>
<p class="my-0">4368</p>
</div>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<small class="text-muted">Language</small>
<p class="my-0">ita</p>
</div>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<!-- doesnt work here -->
<a href="https://twitter.com/intent/tweet?button_hashtag=share&ref_src=twsrc%5Etfw" class="twitter-hashtag-button" data-show-count="false">Tweet #share</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
任何建议表示赞赏。
解决方案
您可以做的是更改共享链接的类别。
从class="twitter-hashtag-button"
到class="fa fa-twitter"
所以代码看起来像这样:
<!-- doesnt work here -->
<a href="https://twitter.com/intent/tweet?button_hashtag=share&ref_src=twsrc%5Etfw" class="fa fa-twitter" data-show-count="false">Tweet #share</a>
完成此操作后,只需将.fa
类设置为
.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
更新的小提琴
推荐阅读
- pdfbox - 尽管密码错误,pdfbox加密文件仍会打开
- javascript - Nest.js 无法解析依赖,找不到我的错误
- javascript - Local lighthouse has much different score than web.dev lighthouse
- python - 对列名满足字符串匹配条件的所有列的行值求和
- android - 如何在不直接引用数组名称的情况下从 json 数组中获取数据
- python - How to set url in Django?
- c# - 如何统一指挥后退
- javascript - 最大化表格高度,并在 JavaScript/React.js 中包含滚动条
- amazon-web-services - 默认情况下是 Cognito 高可用服务吗?
- r - 在 purrr 循环中将数据框的名称分配给 ggplot 标题