在反应引导模式上指定/设置宽度和高度

Posted 2023-02-21

【中文标题】在反应引导模式上指定/设置宽度和高度

【英文标题】：Specify/Set width and height on a react-boostrap modal

【发布时间】：2015-12-13 23:40:41

【问题描述】：

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

【参考方案1】：

根据它的documentation，你必须通过modal的prop dialogClassName自定义你自己的css类来实现你想要的样式。

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

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

下面有my.css：

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

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

【讨论】：

但是为此我们必须在一些 CSS 文件中静态定义 CSS，而在我的情况下，宽度/高度将通过道具动态定义。所以它不能解决我们的问题。

嗯，有没有可能我们可以使用 JQuery 或其他东西来动态修改类的样式（如my-modal 这里）？

它可以完成，但这是一项额外的工作，React-Bootstrap 开发人员应该自己提供它，而不是我们的实现者袖手旁观 n 自己去寻找一些解决方法。

@Stephen W - 我发现如果我使用 dialogClassName 设置宽度，我需要使用 !important 来覆盖 BS modal-dialog 样式

这只是部分答案，这不是设置高度的方式。