Я пытаюсь создать в React форму, которая будет следовать изображению по этой ссылке здесь . Я пытаюсь добиться этого с помощью React-Bootstrap.
Серые области - это то место, где я хочу включить горизонтальную прокрутку, и сейчас я просто фокусируюсь на верхней серой области, где есть только однастрока, но N столбцов. Я ожидаю иметь более 12 столбцов, и я хочу, чтобы каждый столбец находился в одной строке.
Я пытаюсь использовать Bootstrap для достижения этой цели, создав Row, который содержит Colкоторый содержит Col и стиль Row, чтобы иметь {overflowX: "auto"}, но столбцы переходят на новую строку. Я знаю, что Bootstrap будет переносить столбцы в новую строку, но я просто хочу, чтобы он переполнялся, чтобы я мог прокручивать его.
Я написал некоторый код, чтобы выделить то, что я пытаюсь достичь для первой строки (на моей диаграмме): https://codesandbox.io/s/bitter-shadow-wzv7r?fontsize=14
Есть ли способ достичь этого с помощью React-Bootstrap или есть другой способ достичь этого?