Boostrap 4：模式不會顯示在我的React應用中

Question

我正在嘗試向我的應用添加模式。 我這樣做是為了使我的頁面加載后將顯示（不需要按鈕）用於測試目的。 我的依賴項為"bootstrap": "^4.1.3" 。

在我的CSS上，我將其顯示為阻止狀態：

.modal{
  display: block
}

.modal-content{
  display: block
}

在我的react應用程序中，我將其導入並按以下方式使用：

import 'bootstrap/dist/css/bootstrap.min.css';

  render() {
    return (
      <div className="App">
        <div className="modal fade" id="myModal" role="dialog">
          <div className="modal-dialog">
            <div className="modal-content">
              <div className="modal-header">
                <button type="button" className="close" data-dismiss="modal">&times;</button>
                <h4 className="modal-title">Modal Header</h4>
              </div>
              <div className="modal-body">
                <header className="App-header">
                  Code Authentication
                </header>

                <div className="row">
                  <div className="col-sm-6">
                      {this.getPhoneList()}
                  </div>
                  <div className="col-sm-6">
                      {this.getMethodList()}
                  </div>
                </div>

                <button type="button" className="btn btn-info" onClick={() => this.VerifyCode()}>
                  VERIFY CODE
                </button>
              </div>
              <div className="modal-footer">
              </div>
            </div>

          </div>
        </div>
      </div>
    );
  }

我從boostrap的文檔中復制了模式代碼，並進行了一些修改，使其可以用於我的測試目的。 我也嘗試了許多不同的代碼，但是這些模式都不起作用。

我嘗試過的內容：我在Stack上閱讀了很多與此問題相關的帖子。 其中許多原因僅是因為OP不包含某些文件或未將display屬性設置為show。 就我而言，我都不是。

任何建議都會有幫助

Answer 1

模態旨在與觸發器一起顯示，該觸發器向主體添加modal-open並向模態show 。 要使模式顯示消除fade ，並添加d-block類，它將強制模式顯示。

<div className="modal d-block" id="myModal" role="dialog">
          <div className="modal-dialog">
            <div className="modal-content">
...

https://www.codeply.com/go/r47k4BlDKA

Answer 2

我相信您的.fade類具有opacity: 0;屬性opacity: 0; 您的CSS應該用opacity: 1;覆蓋opacity: 1;