如何将多个图像插入反应引导模式？

Question

我正在尝试使用 react-bootstrap 创建我的网站应用程序，并且在我的一个页面上我需要显示一些具有 6 张图片的模式，当用户单击其中一张图片时，它会将它们重定向到另一个链接。我设法创建了模态，但每张图片的位置都很奇怪。我该如何解决这个问题？有人可以帮我提供一些如下所示的链接设计

这是我的代码：

            <Modal show={show} onHide={handleClose} animation={false}>
                <Row>
                    <Col lg={3}>
                        <a href="https://www.instagram.com/diamondhotelsamarinda/"><img src="/Images/logoig.png" alt="Instagram"/></a>
                    </Col>

                    <Col lg={3}>
                        <a href="https://www.instagram.com/diamondhotelsamarinda/"><img src="/Images/logoig.png" alt="Instagram"/></a>
                    </Col>

                    <Col lg={3}>
                        <a href="https://www.instagram.com/diamondhotelsamarinda/"><img src="/Images/logoig.png" alt="Instagram"/></a>
                    </Col>
                </Row>


                <Row>
                    <Col>
                        <a href="https://www.instagram.com/diamondhotelsamarinda/"><img src="/Images/logoig.png" alt="Instagram"/></a>
                    </Col>

                    <Col>
                        <a href="https://www.instagram.com/diamondhotelsamarinda/"><img src="/Images/logoig.png" alt="Instagram"/></a>
                    </Col>
                   
                    <Col>
                        <a href="https://www.instagram.com/diamondhotelsamarinda/"><img src="/Images/logoig.png" alt="Instagram"/></a>
                    </Col>
                </Row>
            </Modal>

Answer 1

您可以查看this sandbox 的实时工作示例。 具体来说，您应该为每个 K 设置xs={4} 而不是lg={3}。此外，您应该为每行设置margin，为每个图像设置width 属性。 您可以使用此代码。

import Modal from "react-bootstrap/Modal";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";
import { useState } from "react";

export default function App() {
  const [show, setShow] = useState(true);

  const handleClose = () => {
    setShow(false);
  };

  return (
    <div>
      <button onClick={() => setShow(true)}>show modal</button>
      <Modal
        contentClassName="transparentBgClass"
        show={show}
        onHide={handleClose}
        animation={false}
      >
        <Row style={{ marginTop: 20, marginLeft: 20, marginRight: 20 }}>
          <Col xs={4}>
            <a
              href="https://www.instagram.com/diamondhotelsamarinda/"
              target="_blank"
              rel="noreferrer"
            >
              <img
                src="/Images/logoig.png"
                alt="Instagram"
                style={{ width: "100%" }}
              />
            </a>
          </Col>

          <Col xs={4}>
            <a
              href="https://www.instagram.com/diamondhotelsamarinda/"
              target="_blank"
              rel="noreferrer"
            >
              <img
                src="/Images/logoig.png"
                alt="Instagram"
                style={{ width: "100%" }}
              />
            </a>
          </Col>
          <Col xs={4}>
            <a
              href="https://www.instagram.com/diamondhotelsamarinda/"
              target="_blank"
              rel="noreferrer"
            >
              <img
                src="/Images/logoig.png"
                alt="Instagram"
                style={{ width: "100%" }}
              />
            </a>
          </Col>
        </Row>

        <Row
          style={{
            marginTop: 20,
            marginBottom: 20,
            marginLeft: 20,
            marginRight: 20
          }}
        >
          <Col xs={4}>
            <a
              href="https://www.instagram.com/diamondhotelsamarinda/"
              target="_blank"
              rel="noreferrer"
            >
              <img
                src="/Images/logoig.png"
                alt="Instagram"
                style={{ width: "100%" }}
              />
            </a>
          </Col>

          <Col xs={4}>
            <a
              href="https://www.instagram.com/diamondhotelsamarinda/"
              target="_blank"
              rel="noreferrer"
            >
              <img
                src="/Images/logoig.png"
                alt="Instagram"
                style={{ width: "100%" }}
              />
            </a>
          </Col>

          <Col xs={4}>
            <a
              href="https://www.instagram.com/diamondhotelsamarinda/"
              target="_blank"
              rel="noreferrer"
            >
              <img
                src="/Images/logoig.png"
                alt="Instagram"
                style={{ width: "100%" }}
              />
            </a>
          </Col>
        </Row>
      </Modal>
    </div>
  );
}