bootstrap4: 2 или более списка описания рядом друг с другом - PullRequest
Новая
       7

bootstrap4: 2 или более списка описания рядом друг с другом

0 голосов
/ 31 марта 2020

Примечание: новичок в bootstrap.

Я пробовал это: 

  <div class="row">
      <div class="col-sm-8">
          <dl class="row">
            <dt class="col-sm-3">abc:</dt><dd class="col-sm-5">foo</dd>
            <dt class="col-sm-3">xyz:</dt><dd class="col-sm-5">bar</dd>
          </dl>
      </div>
      <div class="col-sm-4">
          <dl class="row">
            <dt class="col-sm-2">X:</dt><dd class="col-sm-2">Q</dd>
            <dt class="col-sm-2">Y:</dt><dd class="col-sm-2">P</dd>
          </dl>
      </div>
  </div>

У меня проблема в том, что в зависимости от размера окна или содержимого, я получаю дисплей типа

dt -> dd -> dt некоторое пространство для второго списка dt-> dd dt-> dd
dd

Проблема в том, что dd первого списка может перетекать на следующую строку. Затем я удалил класс строки в dl, но это потеряет способность визуально отображать dt-> dd в одной строке.

Как можно поместить два (или более) списка определений рядом друг с другом, используя bootstrap4 с ограничение, что не должно быть «переполнения» следующей строки?

РЕДАКТИРОВАТЬ:

Если пространство экрана доступно, я хочу оптимально использовать горизонтальное пространство (например, отображение рабочего стола 16: 9). Мне не нужен список определений, но он кажется логичным выбором для отображения данных базы данных, например, пары имя-значение.

...