Question

在我添加Bootstrap CDN之后，我的所有html元素都会向下移动。如导航栏，页脚中的p。这在添加到标头的链接后恰好发生。如果我发表评论，问题就会消失。

任何人都知道如何解决这个问题？

＆＃13;

* {
  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;
}

＆＃13;

<!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.&emsp;<a href="#">Contacts</a></p>
      <p id="footer_name">Copyright &copy; 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>

＆＃13;

Bottom pic navbar and social icons and text in footer are shifted...

Answer 1

是的，使用<nav>，<header>，<footer>之类的常见标签时，这始终是一个问题。因为这些元素使用Bootstrap设置样式，并与现有样式冲突

你有几种方法：

1）使当前/现有的样式声明更加严格，即

nav ul li { property:value!important;}

2）更改这样的标记名：

然后

nav.mynav ul li {property:value;}

3）更改nav和等分类div的标签，这样你就可以了：。

 <div class="my_navig">
    <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>
  </div>

Answer 2

发生了什么事情是你通过Bootstrap添加了一些新的样式，这与你现有的CSS属性相冲突。

对于导航栏链接，问题在于：

bootstrap.min.css：5（第5行）

ol, ul {
    margin-top: 0;
    margin-bottom: 10px;

将属性添加到导航栏ul，如下所示：

<ul style="margin-bottom:0px;">

Answer 3

您需要将p标记放在容器中，如下所示：

<footer>
  <div class="container">
    <p>text</p>
  </div>
</footer>

Bootstrap在页脚块中需要一个合适的块容器，就像在a的标题块中一样。

添加Bootstrap CDN后，一些html项目会降低

3 个答案: