14

如何将动态宽度和高度应用于 react-bootstrap 模式窗口？我在这里检查了 react-bootstrap 文档，但不知道该怎么做。实际上，宽度和高度道具的值将是动态的（可以是任何值），因为这将是我的应用程序中的可重用组件（用于许多页面），因此无法通过某些 CSS 类应用宽度/高度。

文档中提到的“bsSize”属性也不起作用，尽管 xs、md、lg 的预定义大小不是我真正想要的，而是我需要通过道具在模态上设置宽度和高度。

这是我的示例 JSX 代码：

var MyWindow = React.createClass({
    getInitialState() {
        return { show: true };
    },
    close() {
        this.setState({ show: false });
    },
    open() {
        this.setState({ show: true });
    },
    save() {

    },
    render: function () {

        var Button = ReactBootstrap.Button,
            Modal = ReactBootstrap.Modal,
            ModalBody = ReactBootstrap.ModalBody,
            ModalHeader = ReactBootstrap.ModalHeader,
            ModalFooter = ReactBootstrap.ModalFooter,
            ModalTitle = ReactBootstrap.ModalTitle;

        return (
            <Modal show={this.state.show} onHide={this.close}>
                <ModalHeader closeButton>
                    <ModalTitle>My Cool Window</ModalTitle>
                </ModalHeader>
                <ModalBody>
                    <h4>Text in a modal</h4>
                    <p>Duis mollis, est non commodo luctus</p>
                </ModalBody>
                <ModalFooter>
                    <Button onClick={this.close}>Cancel</Button>
                    <Button bsStyle="primary" onClick={this.save}>Save</Button>
                </ModalFooter>
            </Modal>
        );

    }
});

React.render(<MyWindow width={700} height={400} />, mountNode);
4

2 回答 2

26

根据其文档，您必须自定义自己的 css 类以通过 modal 的 prop 实现所需的样式dialogClassName。

所以我们可能有my.jsx以下代码：

<Modal dialogClassName="my-modal">
</Modal>

如下my.css：

.my-modal {
    width: 90vw    /* Occupy the 90% of the screen width */
    max-width: 90vw;
}

然后您将拥有您的自定义模态！

于 2016-03-13T12:24:52.283 回答
1

另一个提到的解决方案仅适用于设置宽度。

要编辑height，您需要将自定义 css 类添加到contentClassName属性中。

例如：

 <Modal contentClassName="modal-height "></Modal>

CSS类：

.modal-height {
  height: 70%;
}

要进行编辑，width您需要将自定义 css 类添加到dialogClassName属性中。

例如：

 <Modal dialogClassName="modal-width "></Modal>

CSS类：

.modal-width {
  width: 70%;
}

可能的问题：

有时您将不得不使用!important覆盖引导程序强加的 CSS，因此也可以尝试一下。

学分：在这里找到解决方案。

于 2022-03-02T06:35:03.827 回答