如何使用 React 将 Bootstrap Modal 的大小调整为自定义大小

Posted 2023-03-06

【中文标题】如何使用 React 将 Bootstrap Modal 的大小调整为自定义大小

【英文标题】：How to resize Bootstrap Modal to Custom Size using React

【发布时间】：2020-07-09 08:54:25

【问题描述】：

我希望在网站上使用 Bootstrap 的 Modal React 组件。

我想手动将组件的宽度设置为 X 个像素。

如果可以使用 .jsx 文件中的 const 对象来设置 css，那将是首选！但是，如果必须，我可以使用 .css 文件。

这是我当前的 React 代码：

import React,  Component  from "react";
import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";
import "./profile.css";

class Profile extends React.Component 
  state = 
    show: false
  ;

  handleShow = () => 
    this.setState( show: true );
  ;

  handleHide = () => 
    this.setState( show: false );
  ;

  render() 
    return (
      <React.Fragment>
        <Button variant="primary" onClick=this.handleShow>
          Profile
        </Button>

        <Modal
          show=this.state.show
          onHide=this.handleHide
          dialogClassName="custom-modal"
          aria-labelledby="example-custom-modal-styling-title"
        >
          <Modal.Header closeButton>
            <Modal.Title id="example-custom-modal-styling-title">
              Custom Modal Styling
            </Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <p>
              Ipsum molestiae natus adipisci modi eligendi? Debitis amet quae
              unde commodi aspernatur enim, consectetur. Cumque deleniti
              temporibus ipsam atque a dolores quisquam quisquam adipisci
              possimus laboriosam. Quibusdam facilis doloribus debitis! Sit
              quasi quod accusamus eos quod. Ab quos consequuntur eaque quo rem!
              Mollitia reiciendis porro quo magni incidunt dolore amet atque
              facilis ipsum deleniti rem!
            </p>
          </Modal.Body>
        </Modal>
      </React.Fragment>
    );
  


export default Profile;

这是我拥有的 css：

.custom-modal 
  width: 80% !important;
  height: 1500px !important;
  color: orange;

这是结果，您可以看到它不是所需的宽度。 Click here to see

谢谢大家

【参考方案1】：

已修复，只是在 html 文档上出现“%”符号的问题。我改为使用“vw”，它解决了我的问题！