Bootstrap 4:显示两行，后跟一个Read More展开链接 [英] Bootstrap 4: Display two lines followed by a Read More expandable link

问题描述

我正在关注这令人惊叹的指南两行文字，并为用户提供更多信息"的链接. 过渡未按预期工作.有人可以指出我在这里做错了吗?

I am following this amazing guide to display two lines of text, and give the user a link to "Read More". The transitions are not working as expected. Can someone point out what I am doing wrong here?

#module {
  font-size: 1rem;
  line-height: 1.5;
}

#module p.collapse[aria-expanded="false"] {
  display: block;
  height: 3rem !important;
  overflow: hidden;
}

#module p.collapse.show[aria-expanded="false"] {
  height: 3rem !important;
}

#module a.collapsed:after {
  content: '+ Show More';
}

#module a:not(.collapsed):after {
  content: '- Show Less';
}

<div id="module" class="container">
  <h3>Bacon Ipsum</h3>
  <p class="collapse" id="collapseExample" aria-expanded="false">
    Bacon ipsum dolor amet doner picanha tri-tip biltong leberkas salami meatball tongue filet mignon landjaeger tail. Kielbasa salami tenderloin picanha spare ribs, beef ribs strip steak jerky cow. Pork chop chicken ham hock beef ribs turkey jerky. Shoulder
    beef capicola doner, tongue tail sausage short ribs andouille. Rump frankfurter landjaeger t-bone, kielbasa doner ham hock shankle venison. Cupim capicola kielbasa t-bone, ball tip chicken andouille venison pork chop doner bacon beef ribs kevin shankle.
    Short loin leberkas tenderloin ground round shank, brisket strip steak ham hock ham.
  </p>
  <a role="button" class="collapsed" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  </a>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

推荐答案

您的代码可能在引导程序3中工作.但是，由于您使用的是引导程序4，请尝试以下操作.

Your code might work in bootstrap 3. But since you're using bootstrap 4 try the below.

替换此

#module p.collapse[aria-expanded="false"] {
  display: block;
  height: 3rem !important;
  overflow: hidden;
}

#module p.collapse.show[aria-expanded="false"] {
  height: 3rem !important;
}

与此

#module #collapseExample.collapse:not(.show) {
  display: block;
  height: 3rem;
  overflow: hidden;
}

#module #collapseExample.collapsing {
  height: 3rem;
}

小提琴

还要提醒您，::after是伪元素，因此请使用双冒号表示法

Also just to remind you that ::after is a Pseudo-element so use it with double colon notation

这篇关于Bootstrap 4:显示两行，后跟一个Read More展开链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！