正确格式化 Bootstrap 列？ （抵消等）

Question

目前，页面是这样的 {

Answer 1

我不会为图像查看器组件使用响应式布局。我会将它用于容器和组件 flexbox。

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

但是如果您必须使用列，xs="auto" 应该有助于处理空格。只需确保用 Container 包裹你的 Row，我不认为它可以是 child of Col.

这是一个工作布局示例： 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>

至于你的toggle/controls盒子，是<ReportBox>吗？ <ReportBox> 是否有自己的 CSS（例如定位或 z-index）导致它堆叠在图像上方？