html - 添加Bootstrap CDN后部分html元素下移-6ren

html - 添加Bootstrap CDN后部分html元素下移

转载作者：太空宇宙更新时间：2023-11-04 09:43:50

在我添加 Bootstrap CDN 之后，我所有的一些 html 元素都向下移动了。例如导航栏，页脚中的 p。这恰好在向标题添加链接之后发生。如果我将其注释掉，问题就会消失。

有人知道怎么解决吗？

* {
  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.&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>

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

最佳答案

是的，当使用像 <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>

关于html - 添加Bootstrap CDN后部分html元素下移，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39669565/

文章推荐： html - CSS背景图片滚动动画

文章推荐： python - 如何拆分字符串并选择特定字段

文章推荐： python - 删除二维列表中第一次出现的单词？

文章推荐： python - 清理 tensorflow 摘要

一个查询中的mysql列表顺序更新(上移，下移)
如果我只知道一个 id，有没有办法在一个查询中向上/向下移动列表项像这样的 update tbl SET list_order = CASE WHEN id = 10
ios - UitableView 下移
我有两个并排的表格 View ，当我在两个表格中的任何一个上滚动时，我使用下面的代码使它们像一个表格一样滚动。 func scrollViewDidScroll(_ scrollView: UIScr
java - 上移、下移、指定位置
我知道这看起来应该很简单，但由于某种原因，我无法理解解决这个问题的算法，所以我将就这个问题与社区联系。我有一个如下所示的类: class MapElementModel { int id;
c# - 如何在目录树中将我的 git repo 下移？
我目前正在使用 Visual Studio 使用 C# 编写应用程序。因此，VS2010 创建了一个解决方案目录，其中包含我的项目目录。所以我的层次结构是这样的: Solution .git
ios - 给 UITextField 赋值时 UIView 下移
我正在制作一个应用程序，在显示键盘时向上移动 View (当 iPhone 4s/5/5c/5s 时)。但是，当我使用数字 pa 键入内容时，它会触发 View 返回。 textField:shoul
javascript - Highcharts 将 xAxis 下移/移出图表
我正在处理以前开发人员的遗留代码，他们使用的是 highcharts.js (v3.0.1)。 xAxis 落在图中 ( screenshot )，我无法弄清楚这是为什么。我试图在 jsfiddle
ios - 显示标签栏时 Apple TV 下移 viewController
当显示标签栏时，我想向下移动我的 View Controller 内容(即整个 View )。有什么办法可以自动完成吗？还是必须以编程方式完成？最佳答案解决方案很简单。只需取消选中 Interfa
ios - 状态栏整个 View 下移 - iOS 11
我最近升级到 Xcode 9-beta 和 iOS 11。当我升级到我的项目并插入播放时，我的所有 View 都被状态栏向下推了大约 20 像素，而不是状态栏直接在我的顶部看法。我有 iOS 10 的
iphone - 在 AppDelegate 中调用时 subview 下移 20 像素
当我使用调用 AdMob 广告时遇到此问题 [rootController.view addSubview:adMobAd]; //setup the ad 从点击的广告返回后，AdMob 框架会向
iphone - 如果 iPhone 是 iPhone 5，让 UIView 下移
我目前正在创建一个应用程序，它在一个 View 中包含一个 pickerView 和一个 tapbar。 View 位于屏幕底部。 tapbar 总是可见的。如果我点击 tapbar 上的按钮， Vi

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 添加Bootstrap CDN后部分html元素下移