如何仅在特定的 Bootstrap 模式上使用 Bootstrap 4？答案

【问题标题】：How to use Bootstrap 4 only on a specific Bootstrap Modal?如何仅在特定的 Bootstrap 模式上使用 Bootstrap 4？
【发布时间】：2018-05-24 07:46:21
【问题描述】：

我正在开发一个使用 Bootstrap 3 的应用程序，不幸的是 Bootstrap 3 文件 (.css/js) 已被大量修改，我的工作是包含 SummerNote 文本编辑器，一切正常，但他的风格真的很乱由于之前已经完成了自定义，.. 现在是否可以仅在该特定模式上包含和使用 Bootstrap 4？

下面是示例代码！谢谢！

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>bootstrap4</title>

    <!-- My app uses Bootstrap 3 and has been heavily modified  -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <!-- My app uses Bootstrap 3 and has been heavily modified  -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote-bs4.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote-bs4.js"></script>
  </head>
  <body>

    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Summer Note</button>

    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <div id="summernote"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

   
    <script>
      $('#summernote').summernote({
        placeholder: '',
        tabsize: 2,
        height: 100
      });
    </script>
  </body>
</html>

【问题讨论】：

是的。您可以使用<iframe> 将其作为新文档包含在内。它基本上是您页面中的一个新页面。不从父级继承任何 CSS。它是空白的。
闻所未闻...还有其他“干净的方式”吗？
仅仅因为你没有听说过它并不意味着它闻所未闻。而且，真的，是 “干净的方式”。
现在试试..
更新：summernote 不会在 iframe 中呈现

标签： javascript jquery css twitter-bootstrap-3 bootstrap-4

【解决方案1】：

您必须为 modal 创建新文件并在同一页面中包含 Summernote 和 bootstrap 4，将新文件添加到现有文件中。注意：在底部包含新文件，这样它就不会覆盖现有的 bs 版本样式

【讨论】：

如果您从事 Js/Php 项目，这可能会对您有所帮助，