Question

我遇到了boostrap 3的问题，当它在iframe中时，响应式菜单不起作用，如果引导程序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>

Answer 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>

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

1 个答案: