正确格式化Bootstrap列？ （偏移等）

Question

当前，页面外观如下：

应该进行布局，使其位于左侧的4个缩略图中，然后在其右侧是位于其下方的信息框的大图像，然后将带有切换按钮的框切换到大图像的右侧。如您所见，其中的2个相互重叠，左侧的缩略图与左侧的位置偏移太大，并且它们与大图像之间的空间太大。

我怎么写的：

  <div className="App">
    <Container>
      <Row>
        <Col md="4">
          {this.state.images.map((image) => (
            <Row>
              <img id="thumbnail" alt="scan" src={image} onClick={this.changeStudy.bind(this, image)} />
            </Row>
          ))
          }
        </Col>
        <Col md="4">
          <Row>
            <Col>
            {this.state.currStudy && <img alt="scan" src={this.state.currImage} />}
            </Col>
          </Row>
          <Row>
            {this.state.currStudy && <MetadataBox
              viewposition={this.state.currStudy.Metadata.ViewPosition}
              name={this.state.currStudy.Metadata.PatientName}
              age={this.state.currStudy.Metadata.PatientAge}
              sop={this.state.currStudy.Metadata.SOPInstanceUID}
              patientid={this.state.currStudy.Metadata.PatientID}
              accnum={this.state.currStudy.Metadata.AccessionNumber}>
            </MetadataBox >}
          </Row>
        </Col>
        <Col md="4">
          {this.state.currStudy &&
            <ReportBox
              diseases={this.state.diseases}
              image={this.state.currStudy.Filename}
              toggle={this.toggle.bind(this)}
              onSubmit={this.handleSubmit}>
            </ReportBox>
          }
        </Col>
      </Row>
    </Container>
  </div>

（语法为reactstrap btw）

Answer 1

听起来您希望缩略图全部内联显示并且不堆叠在一起？

Answer 2

我不会将自适应布局用于图像查看器组件。我会用它作为容器和组件flexbox。