Question

在使用Angular 6 + Bootstrap 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>

我个人认为，模式背后的问题是由于 row 类的样式所致。使用 dev工具我删除了 display：flex; ，模态似乎还可以，但是页面上的其余样式变得混乱。我不知道该如何克服。

补充说明：不能删除 row 或 col-lg-9 类。

非常感谢您的帮助。

非常感谢，亚历克斯

Answer 1

在多次尝试使用 CSS 解决问题后，我尝试了最后的选择，将子组件和父组件组合在一起。这给了我将 modal 置于 row -> col 类结构之外的机会。

显然，当父元素之一是 display：flex;

时，您不能使用模式

这不是一个很好的解决方案，但是肯定可以！！

Answer 2

torch.onnx.export(style_model, dummy_input, "chipsoft_mod.onnx", verbose=True)

内部脚本

//angular.json

inside style.css

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

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

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

Angular 6子组件中的Bootstrap 4模态

2 个答案: