当前,这是页面查找的方式 {
答案 0 :(得分:2)
我不会对图像查看器组件使用响应式布局。我会用它作为容器和组件flexbox。
https://codesandbox.io/s/cool-breeze-4hyww
但是,如果您必须使用Cols,xs="auto"
应该可以解决空白问题。只需确保用容器包装行,我认为它可能不是Col的孩子。
这是一个具有有效布局的示例: https://codesandbox.io/s/distracted-yonath-klpyg
答案 1 :(得分:0)
听起来像您希望缩略图全部内联显示而不是堆叠在一起?
我将更改您的.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)导致其堆叠在图片上方?