用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();
});
