Bootstrap 4 вложенных ряда одинаковой высоты - PullRequest
Новая
       1

Bootstrap 4 вложенных ряда одинаковой высоты

1 голос
/ 09 июня 2019

Думал, что это требование простое: в результате должна получиться очень простая целевая страница, содержащая две темы.У каждой темы есть подтема.На мобильном устройстве должен быть только один столбец, содержащий тему1, подтему1, тему2, тему2 последовательно.На рабочем столе темы должны появляться рядом, а подтемы должны быть выровнены по вертикали. 

<div class="container-fluid">

<!-- Subtitles are on the same height but the order on mobile is wrong -->
    <div class="row">
        <div class="col-md-6">
            <h1>Topic 1</h1>
            <p>Four lines of text<br>Line2<br>Line3<br>Line4</p>
        </div>
        <div class="col-md-6">
            <h1>Topic 2</h1>
            <p>Two lines of text<br>Line2</p>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <h2>Subtopic 1</h2>
            <p>Number of lines<br>do not matter</p>
        </div>
        <div class="col-md-6">
            <h2>Subtopic 2</h2>
            <p>But Subtopic 1 and Subtopic 2 should be<br>vertically aligned while >=md<br>and when <md, Subtopic 1 shold be below Topic 1, not below Topic 2</p>
        </div>
    </div>

<hr>

<!-- Display on mobile is correct but subtitles on desktop are not aligned anymore -->
    <div class="row">
        <div class="col-md-6">
            <h1>Topic 1</h1>
            <p>Four lines of text<br>Line2<br>Line3<br>Line4</p>
            <div class="row">
                <div class="col">
                    <h2>Subtopic 1</h2>
                    <p>Number of lines<br>do not matter</p>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <h1>Topic 2</h1>
            <p>Two lines of text<br>Line2</p>
            <div class="row">
                <div class="col">
                    <h2>Subtopic 2</h2>
                    <p>But Subtopic 1 and Subtopic 2 should be<br>vertically aligned while >=sm<br>and when <sm, Subtopic 1 shold be below Topic 1, not below Topic 2</p>
                </div>
            </div>
        </div>
    </div>

</div>

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

1 Ответ

0 голосов
/ 09 июня 2019

Одним из способов будет использование order служебных классов из Bootstrap и настройка разметки для всех элементов на одном уровне: 

<div class="container-fluid">
    <div class="row">
        <div class="order-0 order-md-0 col-md-6">
            <h1>Topic 1</h1>
            <p>Four lines of text<br>Line2<br>Line3<br>Line4</p>
        </div>
        <div class="order-2 order-md-1 col-md-6">
            <h1>Topic 2</h1>
            <p>Two lines of text<br>Line2</p>
        </div>
        <div class="order-1 order-md-2 col-md-6">
            <h2>Subtopic 1</h2>
            <p>Number of lines<br>do not matter</p>
        </div>
        <div class="order-3 order-md-3 col-md-6">
            <h2>Subtopic 2</h2>
            <p>But Subtopic 1 and Subtopic 2 should be<br>vertically aligned while &gt;=md<br>and when &lt;md, Subtopic 1
                    shold be below Topic 1, not below Topic 2</p> </div> </div> <hr>
        </div>
    </div>
</div>

Проверьте документацию здесь .

Другой вариант - установить предопределенную фиксированную высоту для столбцов темы или получить максимальную высоту темы и установить ее для всех остальных с помощью JavaScript при загрузке страницы и изменении размера окна.

...