javascript - 如何修复 Jquery 模板？段落长度问题

Question

我想将这个免费使用的 Jquery 模板集成到一个网站中: http://bestjquery.com/tutorial/timeline/demo23/

但是当我尝试在其中包含我自己的句子时，它崩溃了并且不再有响应。

有人对此有想法吗？

我试过放几个p标签，甚至放一个被br标签打断的大句子，或者放一个列表，都没有用。

<div class="demo">
  <div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="main-timeline">
                <div class="timeline">
                    <div class="timeline-icon"><span 
                       class="year">2019</span>
                    </div>
                    <div class="timeline-content">
                        <h3 class="title">NEW YEAR</h3>
                        <p class="description">
                            Lorem ipsum dolor sit amet
                        </p>
                    </div>
                </div>

                <div class="timeline">
                    <div class="timeline-icon"><span 
                       class="year">2018</span>
                    </div>
                    <div class="timeline-content">
                        <h3 class="title">Confirmation</h3>
                        <p class="description">
                            Lorem ipsum dolor sit amet, consectetur 
                            adipiscing elit. Donec lacinia mi ultrices, 
                            luctus nunc ut, commodo enim. Vivamus sem 
                            erat.Lorem ipsum dolor sit amet, consectetur
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</div>

我想获得包含我自己的句子的时间轴(充其量只是一个小句子列表)，并且当我更改页面大小时卡片的显示不会中断。 (因此，它保持响应)。

Answer 1

要为您自己的列表更改此样式，您需要编辑演示的 CSS 文件，而不是 html 文件。要修复文本框以包含更长的句子，您可以增加文本框的组件大小。这是它在 Demo CSS 中的定义:

.main-timeline .timeline-content{
    width: 35%;
    float: right;
    background: #f44556;
    padding: 30px 20px;
    margin: 50px 0;
    z-index: 1;
    position: relative;
}

增加此处的宽度可能会给您更多空间。或者，您可以在时间轴和主时间轴 css 类中弄乱高度。

根据我在演示中所做的，这些盒子似乎已经对不同的屏幕尺寸做出响应，但如果你想改变它们的行为，你可以使用 vw/vh 的相对测量值。参见 https://www.w3schools.com/cssref/css_units.asp所有 CSS 单元以及如何使用它们。