如何在react-bootstrap模态框中插入多张可跳转图片并修复排版异常

问题原因 #

• 未在Modal组件内嵌套Modal.Body，react-bootstrap的模态框内容必须放在该内置组件中才能继承默认的内边距和布局约束
• react-bootstrap的Row组件必须嵌套在Container组件内才能正常触发栅格布局规则，直接放在Modal下会丢失栅格基础样式
• 第一行的3个Col设置了lg={3}，总宽度仅为9/12，剩余3列空间会留白，和第二行无宽度设置的Col布局不统一
• 图片未添加响应式类，尺寸溢出会导致布局错乱

修复方案 #

调整后的代码如下：

<Modal show={show} onHide={handleClose} animation={false}>
  <Modal.Body>
    {/* fluid属性让容器宽度适配模态框尺寸 */}
    <Container fluid>
      {/* g-4设置列间距，mb-3设置两行之间的间距 */}
      <Row className="g-4 mb-3">
        {/* 每列宽度调整为lg={4}，3列总宽度占满12格 */}
        <Col lg={4}>
          <a href="https://www.instagram.com/diamondhotelsamarinda/">
            {/* img-fluid实现图片响应式，w-100让图片撑满列宽 */}
            <img src="/Images/logoig.png" alt="Instagram" className="img-fluid w-100"/>
          </a>
        </Col>
        <Col lg={4}>
          <a href="https://www.instagram.com/diamondhotelsamarinda/">
            <img src="/Images/logoig.png" alt="Instagram" className="img-fluid w-100"/>
          </a>
        </Col>
        <Col lg={4}>
          <a href="https://www.instagram.com/diamondhotelsamarinda/">
            <img src="/Images/logoig.png" alt="Instagram" className="img-fluid w-100"/>
          </a>
        </Col>
      </Row>
      <Row className="g-4">
        <Col lg={4}>
          <a href="https://www.instagram.com/diamondhotelsamarinda/">
            <img src="/Images/logoig.png" alt="Instagram" className="img-fluid w-100"/>
          </a>
        </Col>
        <Col lg={4}>
          <a href="https://www.instagram.com/diamondhotelsamarinda/">
            <img src="/Images/logoig.png" alt="Instagram" className="img-fluid w-100"/>
          </a>
        </Col>
        <Col lg={4}>
          <a href="https://www.instagram.com/diamondhotelsamarinda/">
            <img src="/Images/logoig.png" alt="Instagram" className="img-fluid w-100"/>
          </a>
        </Col>
      </Row>
    </Container>
  </Modal.Body>
</Modal>

如果需要调整模态框整体宽度，可以给Modal组件添加size属性，例如size="lg"即可放大模态框宽度适配内容。

内容的提问来源于stack exchange，提问作者Kim San