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

需要层叠掉bootstrap的css样式,即可解决您的问题
给你推荐一个bootstrap的免费视频,你学习一下.
第二阶段-移动Web网页开发(媒体查询,rem,bootstrap响应式布局) 新编程 xinbiancheng.cn http://www.xinbiancheng.cn/bootstrap.html?chapterID=5&yqm=bbdcf5719dea49cead150ea7a2a50b2d

可以使用栅格系统，定义两行即可，然后把导航放第一格，iframe放第二格

<div class="row">
  <div class="col-lg-12">放导航</div>
  <div class="col-lg-12">放iframe</div>
</div>

img
补充图片。