Bootstrap ~3.7 和最新 Bootstrap (4) 之间简单代码的样式问题
Posted
技术标签:
【中文标题】Bootstrap ~3.7 和最新 Bootstrap (4) 之间简单代码的样式问题【英文标题】：Styling issues on simple code between Bootstrap ~3.7 and latest Bootstrap (4) 【发布时间】：2019-06-21 21:36:15 【问题描述】：我从 Coursera 下载了一些非常简单的代码，用于响应式 Web 设计类来处理切换导航栏，并且似乎 Bootstrap 大约 3.7（带有类代码），非常基本的代码运行良好。
但是，重新下载最新的 Bootstrap 后，代码无法正确显示，我不知道问题出在哪里。我附上了截图。请注意，在显示不正确的元素中，单击小平面按钮将显示其他元素，但仅显示大约半秒后消失。其他多名学生也有完全相同的问题并在论坛上发布过，但没有一个版主或导师能够正确地提出建议，所以我祈祷你们能提供帮助！
这里有什么问题？是最新的 Bootstrap 中不存在的类/类属性吗？
页面的正确显示（BS ~3.7 的外观）：
BS 4.2 的外观，显示不正确：
新的 Bootswatch 主题 (Slate) 显示不正确：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link href="css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"> </script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Edward MonteVerde</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">CV</a></li>
<li><a href="#">Portfolio</a></li>
<!-- here is the dropdown menu -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Contact <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Email</a></li>
<li><a href="#">Skype</a></li>
<!-- can you add another item to the dropdown? -->
</ul>
</li>
<!-- the end of the dropdown menu -->
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
【问题讨论】：
【参考方案1】：是最新的 Bootstrap 中不存在的类/类属性吗？
是的。在主要版本更改（3 到 4）之间，也有主要更新。例如，Bootstrap 4 对 Grid System 使用 flex 而不是 float，并且类名称也发生了变化（pull-right 现在是 float-right）。
这意味着我们不应该期望旧版本的 sn-ps 在新版本中仍然有效，因此需要对其进行调整。
如果此示例是 Bootstrap 3 的默认 sn-p，请考虑查看版本 4 — 通常文档中的示例保持不变。否则，请考虑在这些版本之间查看 the migration guide 以获得 nav，尽管您最好的选择可能仍然是从 Bootstrap 4 sn-p 开始并对其进行调整以匹配设计。
【讨论】：
【参考方案2】：注意：如果付费教授和/或导师无法告诉您如何解决这个非常基本的问题，请停止付费并尝试收回您已经给他们的任何钱。
如果不对您的应用/代码进行重大更改，您通常无法升级工具的“主要”版本。这是使用版本号的任何东西的一般规则（例如，大多数软件，尤其是npm 上的任何东西）。 “主要”版本是版本号中最左边的数字。
v2.3 v3.1 v4.21
在此处阅读有关语义版本控制的更多信息：https://semver.org/
在您的情况下，您将从主要版本 3 升级到主要版本 4。快速查看 bootstrap navbar in version 4，与您发布的代码相比，很多事情都发生了变化。我用更新的代码创建了一个小提琴（注意，调整预览面板的大小以查看它从汉堡包切换到扩展）。
https://jsfiddle.net/m8gfhr95/
这是一个基本的 sn-p。注意nav 元素以及li 和a 元素上的类：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
【讨论】：
以上是关于Bootstrap ~3.7 和最新 Bootstrap (4) 之间简单代码的样式问题的主要内容，如果未能解决你的问题，请参考以下文章
webpack 外部 jqueryui 和 bootstrap