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

Question

当前，这是页面查找的方式                 {

Answer 1

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

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

但是，如果您必须使用Cols，xs="auto"应该可以解决空白问题。只需确保用容器包装行，我认为它可能不是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>

至于您的切换/控制框，是<ReportBox>吗？ <ReportBox>是否有自己的CSS（例如，定位或z-index）导致其堆叠在图片上方？