带预览和溢出扩展的 Bootstrap 4 折叠面板

Question

带预览和溢出扩展的 Bootstrap 4 折叠面板

use*_*446 1 css twitter-bootstrap twitter-bootstrap-3 bootstrap-4

我正在尝试通过示例实现这个看似简单的引导程序设置，该示例显示溢出文本的小预览并为溢出添加可扩展面板。问题是它是为 BS3 设计的，而我的卡需要 BS4。它没有按照我的方式工作，我不确定它是否与 BS3/4 不兼容，因为即使我使用 BS3 CDN（<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>和<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>），它也不能像示例中那样工作。 .. 甚至没有关闭，没有按钮，没有文字，只有标题“培根 Ipsum”。

老实说，我不太擅长 HTML、JS、CSS 和 CDN……所以我可能会离题。如果我没有使用正确的 CSS 或 JS CDN，请告诉我。我唯一改变的是类的 div id。我已经完成了与手风琴类类似的事情，但没有完全像这样的预览和文本的单个部分（不是一个预览，另一个在扩展时显示）。

index.html : (使用最后加载的 style.css 和正文部分底部的 JS CDN 进行编辑)

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="container">
      <div class="module">
        <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>
    </div>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

样式.css：

.module {
    width: 500px;
}

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

.module p.collapsing[aria-expanded="false"] {
    height: 40px !important;
}

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

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

body {
        padding-top: 60px;
        padding-bottom: 40px;
      }

.bs-example {
  margin: 20px;
}

Run Code Online (Sandbox Code Playgroud)

如果我可以结合这本为椭圆形，这将是伟大的！

更新

索引.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div class="container">
      <div class="module">
        <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>
    </div>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

样式.css：

body {
  padding-top: 2rem;
}

.module .collapse, .module .collapsing {
  height: 3rem;  /* [NUM_OF_LINES] x [LINE_HEIGHT] */
}

.module .collapse {
  position: relative;  /* For ...'s content absolute positioning */
  display: block;
  overflow: hidden;
}

.module .collapse:before {
  content: ' ...';
  position: absolute;
  right: 0;
  bottom: 0;
}

.module .collapse.show {
  height: auto;  /* You need to reset the height when not collapsed */
}

.module .collapse.show:before {
  display: none;  /* Of course you don't want to display ... */
}

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

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

Run Code Online (Sandbox Code Playgroud)

CSS 是直接从 jfiddle 示例中复制的。html 放置在实际的 html 标签中，虽然我在本例中没有使用卡片，但可折叠面板将位于所述卡片内。

这是输出：

我可以看到源代码中的主要（和折叠）文本，但它不可见。如果有其他有用的诊断信息，请告诉我。显然，您的解决方案适用于提供的示例，但这里有些不对劲。如果重要，这将通过 django 模板呈现。

Answer 1

Dav*_*ang 7

您的<div>元素无效，因为它具有多个类属性：class="module"和class="container"。第一个类声明将覆盖所有后续值，因此您<div>将只有module类。
您不必仅<p>使用[aria-expanded="false"]. 您可以通过删除 CSS 中的那些来使其更通用。
当显示折叠元素时，您需要重置高度。Bootstrap 4 使用一个名为 CSS 的类，show因此您可以为此编写 CSS 以重置高度。
要显示椭圆样式文本溢出，通常你可以只使用CSS3text-overflow与overflow: hidden;和white-space: nowrap;。但是，text-overflow仅适用于单行文本。要破解它，您必须对内容使用绝对定位...。
在演示中，我在折叠时显示 2 行文本。为了计算高度，我只使用了 [NUM_OF_LINES] 乘以 [LINE_HEIGHT]，即 bootstrap 中的 1.5。这就是我如何达到3rem高度的方式。

HTML

<div class="container">
    <div class="module">
        <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>
</div>

Run Code Online (Sandbox Code Playgroud)

CSS

.module .collapse, .module .collapsing {
    height: 3rem;
}

.module .collapse {
    position: relative;
    display: block;
    overflow: hidden;
}

.module .collapse:before {
    content: ' ...';
    position: absolute;
    right: 0;
    bottom: 0;
}

.module .collapse.show {
    height: auto;
}

.module .collapse.show:before {
    display: none;
}

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

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

Run Code Online (Sandbox Code Playgroud)

结构

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" href="style.css">

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        ...

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

演示

小提琴：https : //jsfiddle.net/davidliang2008/cu0p613v/

归档时间：	7 年，4 月前
查看次数：	9759 次
最近记录：	5 年，2 月前