为何点击前两个标签和后两个标签，下面显示的内容段间距不同-慕课网

为何点击前两个标签和后两个标签，下面显示的内容段间距不同

来源：3-13 编程练习

程程的爹妈

2015-11-16 17:22

为何点击前两个标签和后两个标签所显示的内容，与其下面显示的内容段间距不同。看起来好像下面的内容在向上移动，段间距变窄，怎么能消除这种问题？看起来段间距都一样呢

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello World</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation"><a href="#one" data-toggle="tab">第一节</a></li>
  <li role="presentation"><a href="#two" data-toggle="tab">第二节</a></li>
  <li role="presentation"><a href="#three" data-toggle="tab">第三节</a></li>
  <li role="presentation"><a href="#four" data-toggle="tab">第四节</a></li>
</ul>
<div>
    <div id="one"><P>根据课程所学或官方文档1</P></div>
    <div class="tab-pane active" id="two"><P>根据课程所学或官方文档搭建基础的标签页结构2</P></div>
    <div id="three">hahah3</div>
    <div id="four">hahah4</div>
</div>
<P>根据课程所学或官方文档搭建基础的标签页结构2</P>
<script>
    window.onload = function(){
        $("a:eq(1)").tab("show");
    }
</script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

写回答关注