Изменить расположение макета в boostrap, изменив col из родительской строки - PullRequest
Новая
       20

Изменить расположение макета в boostrap, изменив col из родительской строки

0 голосов
/ 18 мая 2019

Я создаю HTML-страницу, которая представляет «информационную страницу документа» для данного документа в приложении. Это основано на boostrap-4.

Мне нужно представить эти четыре блока информации: 

Data = Document name, size, author, etc.
Image = A thumbnail of the first page of the document.
Tags = Keywords referring to the document.
Links = Several helper links like 'see other documents of the same author' or so.

В «широкоэкранном режиме» (например, LG и XL) макет следующий:

  • Основным содержанием являются данные
  • Изображение идет слева от данных
  • Теги справа от данных
  • Наконец, ссылки идут ниже данных, но «внутри» общей высоты изображения и тегов

Как это: 

+----------------+----------------+----------------+
|                |                |                |
|                |                |                |
|                |     Data       |                |
|                |                |                |
|     Image      +----------------+      Tags      |
|                |                |                |
|                |     Links      |                |
|                |                |                |
|                |                |                |
+----------------+----------------+----------------+

Что я мог бы реализовать следующим образом: 

+----------------+----------------+----------------+
|                | +------------+ |                |
|                | |            | |                |
|                | |   Data     | |                |
|                | |            | |                |
|     Image      | +------------+ |      Tags      |
|                | |            | |                |
|                | |   Links    | |                |
|                | |            | |                |
|                | +------------+ |                |
+----------------+----------------+----------------+

то есть: структура, подобная этой: 

<div class="row">
    <div class="col">Image</div>
    <div class="col">
        <div class="row">
            <div class="col">Data</div>
        </div>
        <div class="row">
            <div class="col">Links</div>
        </div>
    </div>
    <div class="col">Tags</div>
</div>

В узком режиме (MD, SM и XS) макет:

  • Одна строка для изображения и данных.
  • Ниже теги.
  • Наконец ссылки.

Как это: 

+----------------+----------------+
|                |                |
|     Image      |     Data       |
|                |                |
+----------------+----------------+
|                                 |
|              Tags               |
|                                 |
+---------------------------------+
|                                 |
|              Links              |
|                                 |
+---------------------------------+

Это ясно показывает 3 строки, которые могут быть реализованы как: 

<div class="row">
    <div class="col">Image</div>
    <div class="col">Data</div>
</div>
<div class="row">
    <div class="col">Tags</div>
</div>
<div class="row">
    <div class="col">Links</div>
</div>

Что я уже знаю

Я уже знаю, если я продублирую какой-нибудь html на странице, я мог бы поиграть с видимостью, чтобы скрыть что-то здесь и сделать так, чтобы оно появилось там. Но я чувствую себя отвратительно, когда содержание повторяется.

Я уже знаю, что, если мне нужно, я могу использовать javascript для отсоединения и повторного присоединения html отсюда туда ... Но я чувствую себя уродливым, когда контент должен копироваться, перемещаться и управляться javascript.

Я уверен, что это можно решить, просто переставляя ордера и используя отзывчивые точки останова для принудительной установки ширины. Например, последний макет (узкий) может быть выполнен в виде одной строки с Image и Data, равными col-6 и Tags и Links, равными col-12, и иметь все четыре блока в одном строка, которая управляет этим -12 переносом на следующую строку ...

Но я не могу найти решение, которое бы соответствовало обоим макетам в одном html.

Вопрос

Как я могу структурировать строки и столбцы таким образом, чтобы это был один и тот же HTML для обоих макетов, и я играю только с row- *, col- * или с любыми другими элементами сетки? https://getbootstrap.com/docs/4.3/layout/grid/

...