在react-boostrap模态上指定/设置宽度和高度

Question

如何将动态宽度和高度应用于react-bootstrap模态窗口？我在这里检查了react-bootstrap文档,但无法弄清楚如何做到这一点.实际上,宽度和高度道具的值将是动态的(可以是任何值),因为这将是我的应用程序中的可重用组件(在许多页面上使用),因此不能通过某些CSS类应用宽度/高度.

文档中提到的'bsSize'属性也不起作用,虽然xs,md,lg的预定义大小不是我想要的,而是我需要通过props在模态上设置宽度和高度.

这是我的示例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);

Answer 1

根据其文档,您必须自定义自己的css类,以通过模态的道具实现您想要的样式dialogClassName.

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

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

有my.css以下:

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

然后你将拥有自己的模态!