如何将多个图像插入 react-bootstrap 模态？

Question

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

这是我的代码：

            <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>
  );
}

如何将多个图像插入 react-bootstrap 模态？

how to Insert multiple Image into react-boostrap modal?

html

css

reactjs

react-bootstrap