Как изменить размер Bootstrap Модальный до Нестандартного размера, используя React - PullRequest
Новая
       4

Как изменить размер Bootstrap Модальный до Нестандартного размера, используя React

1 голос
/ 28 марта 2020

Я собираюсь использовать компонент Modal React Bootstrap на веб-сайте.

Я бы хотел вручную установить ширину компонента равной X количеству пикселей.

Если возможно установить css, используя объект const в файле .jsx, который будет предпочтительным! Но, если потребуется, я могу использовать файл. 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;
}

И вот результат, так как вы можете видеть его не нужную ширину. Нажмите здесь, чтобы увидеть

Спасибо, ребята

1 Ответ

0 голосов
/ 29 марта 2020

Исправлено, просто возникали проблемы с наличием знаков "%" на html do c. Вместо этого я использовал «vw», и это исправило мою проблему!

...