如何将反应引导模式与单击的按钮对齐

Question

我有一个react bootstrap模式，我想显示我的模式相对于单击的按钮，我的react boottrap表中有一个选项，所以当我点击该选项时，我显示了我的模式，但它没有相对对齐。

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
}

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

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

Answer 1

您应该将contentClassName更改为dialogClassName。

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