javascript - 如何相对于单击的按钮对齐 react-bootstrap 模式

Question

我有一个 react-bootstrap-modal this，我想显示相对于单击的按钮的模态，我的 react-bootstrap-table 中有一个选项，所以当我单击该选项时，我正在显示我的模态，但它不是相对对齐。

1. 我正在使用contentClassName覆盖.modal-content，我不知道，但它没有按预期工作

         <Modal
           show={props.show}
           onHide={props.handleClose}
           contentClassName="modal_l" // this is I am doing to override
           aria-labelledby="example-custom-modal-styling-title">
           <div className="container_modal_options">
               <div className="heading">Heading</div>
               <div className="content">"content</div>
           </div>
       </Modal>
   

在这里我分享最少的代码，

    .modal_l {
      width: 100px !important; it is not taking styling
    }

我想在右侧显示模态，点击附近

这是我的代码沙盒工作代码

标签： javascriptcssreactjsbootstrap-modalreact-bootstrap

Answer 1

您应该更改contentClassName为dialogClassName.

.modal_l {
  width: 100px !important;
  max-width: none !important;// set max-width, if needed. 
}