@Santos2004

Как предотвратить перенос компонентов на новую строку в React BootStrap?

Дано: есть станица со сводной таблицей. в какой то момент времени при добавлении нового столбца компоненты таблицы стали перескакивать на другую строчку. что недопустимо. нужно чтобы в одну строчку с горизонтальным скролингом. если бы это было написано на чистых гридах все бы было ок. но это Bootstrap 5. вот код:
<div
            className={classNames(
              'w-100 d-inline-grid pt-2 text-center d-inline-grid text-1000 fs--1 fw-semi-bold bg-200'
            )}

          >
            <div>Объект</div>
            <div>Номер заявки</div>
            <div>Система</div>
            <div>Текст</div>
            <div>Дата создания</div>
            <div>Ответственные</div>
            <div>Исполнители</div>
            <div>Инициатор</div>
            <div>Диспетчер</div>
            <div>Статус</div>
          </div>

я так понимаю, что дело в этой строчке:
className={classNames(
              'w-100 d-inline-grid pt-2 text-center d-inline-grid text-1000 fs--1 fw-semi-bold bg-200'
            )}


что нужно поменять / добавить чтобы все div были в одну строчку с горизонтальной прокруткой и одинаковой ширины?
  • Вопрос задан
  • 79 просмотров
Решения вопроса 1
Mike_Ro
@Mike_Ro
Python, JS, WordPress, SEO, Bots, Adversting
если бы это было написано на чистых гридах все бы было ок. но это Bootstrap 5

Так прикрутите класс и допишите "чистых гридов":
.items {
    grid-auto-columns: 100px;
    grid-auto-flow: column;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы