在ReadMore激活(折叠)时调整Bootstrap 4中的行高



在一个三列的行中,我创建了一个;阅读更多";使用Bootstrap的collapse类进行设置(这是在一行中输入的原始html(:

<div class="blog grid-view col3">
<div class="blog-posts">
<div class="isotope row">
<div class="col-sm-6 col-md-4 grid-view-post">
<div class="post">
<figure>
<a href="../../our-work/independent/bebc/">
<div class="overlay">
<div class="info"><span>View Project</span></div>
</div>
<img src="../../wp-content/uploads/2020/05/002-ATKINS_1240x914_.jpg"
class="attachment-ryla-grid size-ryla-grid wp-post-image"
alt=""
height="300"
width="440">
</a>
</figure>
<div class="post-content">
<h3 class="post-title"><a href="../../our-work/independent/bebc/">Business
Entrepreneurship Boot Camp</a></h3>
<div class="meta"> </div>
<p>Lorem Ipsum quad est felito que nuncan pare neque porro
quisquam est qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit…<a data-toggle="collapse" data-target="#rm_bebc" class="btn">Read
More</a>
<span id="rm_bebc" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</span>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 grid-view-post">
<div class="post">
<figure> <a href="../../our-work/independent/nftp/">
<div class="overlay">
<div class="info"><span>View Project</span></div>
</div>
<img src="../../wp-content/uploads/2020/05/022-FAREWELL_1240x914.jpg"
class="attachment-ryla-grid size-ryla-grid wp-post-image"
alt=""
height="300"
width="440">
</a> </figure>
<div class="post-content">
<h3 class="post-title"><a href="../../our-work/independent/nftp/">Netherlands
Fulbright Teachers Program</a></h3>
<div class="meta"> </div>
<p>Lorem Ipsum quad est felito que nuncan pare neque porro
quisquam est qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit…<a data-toggle="collapse" data-target="#rm_nftp" class="exp_col">
Read More</a>
<span id="rm_nftp" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</span>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 grid-view-post">
<div class="post">
<figure> <a href="../../our-work/independent/step-up/" target="_blank">
<div class="overlay">
<div class="info"><span>View Project</span></div>
</div>
<img src="../../wp-content/uploads/2020/05/suu_logo_1240x914_.jpg"
class="attachment-ryla-grid size-ryla-grid wp-post-image"
alt=""
height="300"
width="440">
</a> </figure>
<div class="post-content">
<h3 class="post-title"><a href="../../our-work/independent/step-up/"
target="_blank">Step
Up</a></h3>
<div class="meta"> </div>
<p>STEP-UP stands for Sustain, Train, Educate and Promote in
Uganda. STEP-UP is an ITD project which offers medical and and
psycho-social…<a data-toggle="collapse" data-target="#rm_su">Read More</a>
<span id="rm_su" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>

我想要的是一个函数,当";阅读更多";链接被激活;并且一旦我加上一个";读得更少";选项

我很难找到合适的javascript函数。我没有向系统添加新二进制文件的权限。

事实证明,我所要做的就是将三个<div class="post">部分分解,并将每个部分放入自己的引导列中——这些列自行扩展!

相关内容

  • 没有找到相关文章

最新更新