Правильно ли форматировать столбцы Bootstrap? (Смещение и т. Д.)

Question

В настоящее время, вот как страница lo {

Answer 1

Я бы не использовал адаптивный макет для компонента просмотра изображений. Я бы использовал его для контейнера и для компонента flexbox.

https://codesandbox.io/s/cool-breeze-4hyww

Но если вы должны использовать Cols, xs="auto" должно помочь с пробелами. Обязательно оберните свою строку контейнером, я не думаю, что это может быть дочерний элемент полковника.

Вот пример с рабочим макетом: https://codesandbox.io/s/distracted-yonath-klpyg

Answer 2

Звучит так, как будто вы хотите, чтобы миниатюры появлялись все вместе и не накладывались друг на друга?

Я бы изменил вашу функцию .map(), которая, по-видимому, генерирует несколько <Row>, чтовероятно не то, что вы хотите. Это работает для миниатюр?

<Col md="4">
    {this.state.images.map((image) => (
        <img id="thumbnail" alt="scan" src={image} onClick={this.changeStudy.bind(this, image)} />)
    )}
</Col>

Что касается вашего переключателя / блока управления, это <ReportBox>? Имеет ли <ReportBox> свой собственный CSS (например, позиционирование или z-индекс), который заставляет его укладываться над изображением?