Как исправить шаблон Jquery?проблема с длиной абзаца - PullRequest
Новая
       10

Как исправить шаблон Jquery?проблема с длиной абзаца

0 голосов
/ 01 февраля 2019

Я хотел бы интегрировать этот бесплатный шаблон 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>

Я бы хотелполучить эту временную шкалу с моими собственными предложениями (в лучшем случае в виде списка небольших предложений), чтобы при изменении размера страницы отображение карточек не прерывалось.(так, чтобы он оставался отзывчивым).

1 Ответ

0 голосов
/ 01 февраля 2019

Чтобы изменить этот стиль для своего собственного списка, вам нужно отредактировать CSS-файл демонстрации, а не html-файл.Чтобы блоки включали более длинные предложения, вы можете увеличить размер компонента текстового поля.Вот его определение в демонстрационном 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 и как их использовать.

...