Блог

Главная - Вопросы по программированию - Сложность использования overflow-x

Сложность использования overflow-x

#html #css #vue.js

#HTML #css #vue.js

Вопрос:

У меня есть некоторые данные, которые я хочу отобразить, используя структуру, подобную таблице, с использованием div. Я пишу это в vuejs и использую bootstrap. Итак, у меня есть основная оболочка с b-контейнером, а затем я использую b-row для каждой строки и b-col для каждой ячейки. Проблема в том, что в зависимости от данных таблица может быть больше, чем указанный размер b-cointainer. Я пытался использовать overflow-x: scroll; чтобы содержимое можно было прокручивать, но дополнительные ячейки просто опускаются. Я также пытался использовать overflow-x для каждой строки, но это создало полосу прокрутки для каждой строки. При просмотре документации для overflow-x говорится, что она сделает его прокручиваемым, когда он выходит за пределы края либо с левой, либо с правой стороны. Это не работает, поскольку это дочерний элемент дочернего элемента, который исчезнет с экрана?

 <b-container style="overflow-x: scroll;">
    <b-row>
        <b-col>
            Information
        </b-col>
        ...
    </b-row>
    ...
</b-container>

Комментарии:

1. Что именно не работает? Полоса прокрутки не отображается по оси x в контейнере, когда таблица большая?

2. отображается полоса прокрутки, но все элементы, которые в конечном итоге должны быть скрыты полосой прокрутки, просто сдвигаются вниз. Итак, если в таблице может быть 10 ячеек по оси x, а у меня их 15. Те 5, которые должны быть скрыты до тех пор, пока я не прокручу, просто опускаются под строку

3. вы пробовали добавлять flex-wrap: nowrap в свой row ? Bootstrap использует flexbox, и он будет переносить ваши элементы по умолчанию