Отзывчивая строка с прокруткой overflow-x и выравниванием текста по левому, центральному и правому краям - PullRequest
Новая
       4

Отзывчивая строка с прокруткой overflow-x и выравниванием текста по левому, центральному и правому краям

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

Я разработал строку с переполнением прокрутки x на уменьшенных экранах.

Есть ли способ выровнять текст по левому краю, по центру и справа по одной строке?
Я намерен добиться то же самое, но с выравниванием текста по нескольким позициям.

Демонстрация в Stackblitz

Код 

<div class="d-flex justify-content-md-center flex-nowrap myrow" style="margin-top: 148px;">
  <span style="margin-right:15px">LEFT</span>
  <span style="margin-right:15px">CENTER</span>
  <span style="margin-right:15px">RIGHT</span>
</div>

.myrow {
  overflow-x: auto;
}

1 Ответ

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

Вы можете добавить justify-content-between класс к нему.
И затем вы также можете удалить поля. 

<div class="d-flex justify-content-between justify-content-md-center flex-nowrap myrow" style="margin-top: 148px;">
  <span>LEFT</span>
  <span>CENTER</span>
  <span>RIGHT</span>
</div>

Это класс Bootstrap, который применяется justify-content: space-between для гибкие элементы.

...