角6子分量中的Bootstrap 4模态

Question

在使用角形6+引导带4组合时，我偶然发现了模态问题。每当我打开一个模态，它就会在modal-backdrop.后面打开有趣的是，这并不是这个项目的唯一模式，而只有这一个表现得很有趣。

我导入了如下相关库(Angular.json文件)：

"styles": [            
          "src/styles.scss",
          "node_modules/bootstrap/dist/css/bootstrap.min.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.min.js",  
          "node_modules/popper.js/dist/umd/popper.min.js", 
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]

按钮打开模态：

  <div class="row">
    <div class="col">
      <button class="btn btn-md" data-toggle="modal" data-target="#modalID">Click Here</button>
    </div>
  </div>

模态本身(简化)：

<div class="modal fade" id="modalID">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <!-- Header Here -->
      </div>
      <div class="modal-body">
        <!-- Body here -->
      <div class="modal-footer">
        <div class="col-6">
          <!-- Buttons here -->
      </div>
    </div>
  </div>
</div>

现在，所有的HTML代码都在子组件中--其子组件是父组件的一部分。代码如下：

<div class="row">    
  <div class="col-lg-9">
     <div class="space-bottom">
       <app-given-component></app-given-component>
     </div>
   </div>
</div>

我个人认为，问题的模式背后的背景是由于造型的排类。使用dev工具，我删除了显示:flex；和模式，但页面上的其余样式变得混乱了。我不知道怎么克服这一切。

附加注意:它不是一个选项，以删除行或-lg-9类.

我非常感谢你的帮助。

非常感谢，亚历克斯

Answer 1

在多次尝试使用CSS解决问题失败后，我选择了最后的选项，并将子组件和父组件组合在一起。这使我有机会将我的模式放在行-> col类结构之外。

显然，当父元素之一是显示时，不能使用模式:flex；

不是一个很好的解决方案，但确实有效！

Answer 2

//angular.json

内部脚本

"./node_modules/jquery/dist/jquery.min.js",

"./node_modules/popper.js/dist/umd/popper.min.js"

"./node_modules/bootstrap/dist/js/bootstrap.min.js"

内部style.css

@import "~bootstrap/dist/css/bootstrap.css";

@import "~font-awesome/css/font-awesome.css";