yanluomeng 2021-08-30 11:42 采纳率: 100%
浏览 69
已结题

bootstrap布局iframe布局的问题

用IFRAME做网页布局,两个iframe一个做导航栏,一个做内容网页展示栏目,现在的问题是导航栏和内容展示页面之间有一段很大的空白,如果去掉这段空白,让他们靠近。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章助手</title>
    <link href="../static/css/bootstrap.css" rel="stylesheet" />
    <link rel="stylesheet" href="../static/css/style.css" media="screen" type="text/css" />
</head>
<body>
    <script type='text/javascript' src='../static/js/jquery-2.1.1.min.js'></script>
    <script type='text/javascript' src='../static/js/bootstrap.min.js'></script>
    <style>
            .navbar-nav>li>a:hover {
                background: #555 !important;
                color: #fff !important;
            }

            .navbar-nav>li:last-of-type>a {
                border: 0;
            }


    </style>

    <br />

    <!-- 16:9 aspect ratio -->
        <div class="container" style="width: 100%;height:1%">
    
    
<div class="embed-responsive embed-responsive-16by9"  style="width: 100%;height:20%;" >
<iframe id ="mframe1" class="embed-responsive-item" src="http://127.0.0.1:5000/headnav"></iframe>
</div>
<!-- 16:9 aspect ratio -->

<div class="embed-responsive embed-responsive-16by9"  > 
<iframe id ="mframe2" class="embed-responsive-item" src="http://127.0.0.1:5000/datalist"></iframe>
</div> 
    </div>
    
    
    
    <script src="../static/js/index.js"></script>
    </body>

</html>
var breakpoint = 0;

// Function to set equinav breakpoint
function equiNavBreakpoint () {
    $('.equinav ul.navbar-nav > li').each(function(){ breakpoint += $(this).innerWidth(); }); //add up all menu items width for breakpoint
}

equiNavBreakpoint();

// Function to apply equinav menu
function equiNavMenu () {
    
    $('.equinav ul.navbar-nav > li').removeAttr('style');
    
    var mq = window.matchMedia('(min-width: 768px)');
    
    var nav = $('.equinav').innerWidth(); // Navbar Width
    var items = $('.equinav ul.navbar-nav > li').length; // Total number of menu items
    var space = nav - breakpoint; // Empty navbar space
    var spacer = parseInt(space / items); // Number of pixels to spread out to individual menu items. Since decimal places is not good with pixels we have to use parseInt.
    var xspace = nav - (breakpoint + (spacer * items)); // The remaining space after getting the spacer with parseInt
    var xspacer = Math.ceil(xspace / items); // The remaning number of pixels to distribute to menu items
    
    var num = 0;
    
    if (mq.matches) {
    
      if (nav > breakpoint) {
        
            $('.equinav').removeClass('equinav-collapse');
            
            if (breakpoint == 0) equiNavBreakpoint();
            
            $('.equinav ul.navbar-nav > li').each(function(){
                
                    $(this).css({'width':'auto'});
                    
                    var itemwidth = 0;
                    itemwidth = (num < xspace) ? ($(this).innerWidth() + spacer) + xspacer : $(this).innerWidth() + spacer;
                    
                    $(this).css({'width':itemwidth+'px'});
                    
                    num++;
                    
                    if ( $(this).find('.dropdown-menu').length != 0 ) {
                        if (num == items) $(this).find('.dropdown-menu').addClass('pull-right');
                        if ($(this).find('.dropdown-menu').innerWidth() < $(this).innerWidth()) $(this).find('.dropdown-menu').css({'width':$(this).innerWidth()+'px'});
                    }
            });
            
        } else {
            
            $('.equinav').addClass('equinav-collapse');
            $('.equinav ul.navbar-nav > li > .dropdown-menu').removeAttr('style');
            
        }
        
    } else {
        
        $('.equinav').addClass('equinav-collapse');
        $('.equinav ul.navbar-nav > li > .dropdown-menu').removeAttr('style');
        
    };
}

equiNavMenu();

$(window).resize(function(){
    equiNavMenu();
});

![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/473746492036178.png '微信图片_20210830113703.png')


img

  • 写回答

3条回答

      报告相同问题?

      相关推荐 更多相似问题

      问题事件

      • 系统已结题 9月9日
      • 已采纳回答 9月1日
      • 创建了问题 8月30日

      悬赏问题

      • ¥15 ABAQUS简单的带传动系统运转不了
      • ¥15 关于git actions自动部署的问题
      • ¥25 小程序 view wx:for 循环太多时,如何在循环结束执行某个事件?
      • ¥15 曲率模态差matlab程序计算
      • ¥15 大概算是比较简单的坐标系旋转问题
      • ¥15 关于#python#的问题:安装完gym环境后
      • ¥15 关于稳像云台姿态控制中相机姿态误差表征
      • ¥15 求sm16306s驱动例程
      • ¥15 本地生活媒体平台口碑选品怎么获得权限
      • ¥15 R语言 回归树/袋装树/随机森林预测