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

Question

[Santos2004]

Дано: есть станица со сводной таблицей. в какой то момент времени при добавлении нового столбца компоненты таблицы стали перескакивать на другую строчку. что недопустимо. нужно чтобы в одну строчку с горизонтальным скролингом. если бы это было написано на чистых гридах все бы было ок. но это 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 были в одну строчку с горизонтальной прокруткой и одинаковой ширины?

Answer 1

[Михаил Р.]

если бы это было написано на чистых гридах все бы было ок. но это Bootstrap 5

Так прикрутите класс и допишите "чистых гридов":

.items {
    grid-auto-columns: 100px;
    grid-auto-flow: column;
}

Comments

[Santos2004]

прекрасно спасибо большое

[Михаил Р.]

Santos2004, все, кто жмёт соответствующие кнопки под ответом - всегда пожалуйста

[Santos2004]

Михаил Р., я нажал?)

[Михаил Р.]

Santos2004, почти, если помогло - отметьте решением