iframe 中的 bootstrap 3，如何使响应式菜单工作？答案

【问题标题】：bootstrap 3 inside an iframe, how to make the responsive menu work?iframe 中的 bootstrap 3，如何使响应式菜单工作？
【发布时间】：2018-03-28 07:59:59
【问题描述】：

我对 boostrap 3 有疑问，当它在 iframe 内时，响应式菜单不起作用，如果使用 bootstrap 4，它必须与 bootstrap 3 一起使用，index.html 具有以下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <meta name="description" content="ARCSA SERVICES PROTECTION, LLC">

  <title>ARCSA SERVICES PROTECTION, LLC | Credit Rating</title>
<style>
        iframe.menu {
            position: absolute;
            top:0;
            left: 0;
            width: 100vw;
            height: 100vh;
         }
         .mainContent {
           float:left;
           width:75%;
           height:80%;
         }    
</style>
</head>
<body>
    <iframe class="menu col-lg-12 col-md-12 col-sm-12" src="https://bootswatch.com/3/cyborg/"></iframe>

 </body>
</html>

如果我改成 bootstrap4 效果很好，我怎样才能让 bootstrap3 正常工作？

<!-- Thi is bootstrap4 -->
<iframe class="menu col-lg-12 col-md-12 col-sm-12" src="https://bootswatch.com/cyborg/"></iframe>

【问题讨论】：

标签： html twitter-bootstrap twitter-bootstrap-3 responsive-design

【解决方案1】：

我对这个问题的解决方案：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="jquery.responsiveiframe.js"></script>
<script type='text/javascript'>
$(function() {
  $('iframe').responsiveIframe({xdomain: '*'});
});
</script>

<style>
body {
  margin: 0;
    width: 100vw;
    height: 100vh;
}
iframe {
    width: 100vw;
    height: 100vh;
    border: none;
}
</style>
</head>
<body>
    <iframe class="" src="https://bootswatch.com/3/cyborg/"></iframe>
 </body>
</html>

【讨论】：