0
添加Bootstrap CDN后，我的一些html元素向下移动。如导航栏，p的页脚。这恰好发生在添加到标题的链接之后。如果我发表评论，问题就会消失。添加Bootstrap CDN后，一些html项向下移动
任何人都知道如何解决这个问题？
* {
margin: 0;
padding: 0;
}
body {
min-width: 800px;
}
header {
width: 100%;
position: fixed;
height: 40px;
line-height: 40px;
overflow: hidden;
min-width: inherit;
z-index: 1;
}
.base {
background: #333333;
}
nav {
position: relative;
}
.logo {
float: left;
height: 100%;
padding: 0 20px;
}
.logo:hover {
background: #404040;
}
#logo_img {
height: 30px;
vertical-align: middle;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
nav li {
float: left;
width: 100px;
text-align: center;
color: #f2f2f2;
font-family: "Calibri";
font-size: 20px;
}
nav li:hover {
background: #404040;
}
#social {
float: right;
margin-right: 7px;
line-height: 35px;
}
#social li {
float: left;
text-align: center;
color: #f2f2f2;
padding: 0 4px;
}
#social li:hover {
background: #404040;
}
#social img {
height: 35px;
vertical-align: middle;
}
footer {
color: white;
height: 25px;
width: 100%;
padding: 5px;
position: fixed;
bottom: 0;
right: 0;
cursor: default;
border: none;
overflow: hidden;
min-width: inherit;
z-index: 1;
}
footer a {
color: #007acc;
}
footer a:hover {
color: #007acc;
text-decoration: underline;
}
footer p {
color: #e6e6e6;
margin: 5px 15px;
font-size: 12px;
font-family: "Lucida Sans Unicode";
}
#info {
float: left;
}
#footer_name {
float: right;
}<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link type="text/css" href="css/main.css" rel="stylesheet">
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
<!--Bootstrap links-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<header class="base">
<div class="logo">
<a href="#"><img id="logo_img" src="img/logo.png"></a>
</div>
<nav>
<ul>
<a href="#"><li><span class="menu_item">Home</span></li></a>
<a href="#"><li><span class="menu_item">Diary</span></li></a>
<a href="#"><li><span class="menu_item">Foods</span></li></a>
<a href="#"><li><span class="menu_item">Settings</span></li></a>
<a href="#"><li><span class="menu_item">About</span></li></a>
</ul>
</nav>
<div id="social">
<ul>
<a href="#"><li><img class="social_icons" src="img/facebookc.png"></li></a>
<a href="#"><li><img class="social_icons" src="img/twitterc.png"></li></a>
<a href="#"><li><img class="social_icons" src="img/instagramc.png"></li></a>
</ul>
</div>
</header>
<footer class="base">
<p id="info">This website was created by a student of Wroclaw University of Technology. <a href="#">Contacts</a></p>
<p id="footer_name">Copyright © 2016 FitIt, Inc.</p>
</footer>
<!--Scripts-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>Bottom pic navbar and social icons and text in footer are shifted...
