Bootstrap ~3.7 和最新 Bootstrap (4) 之间简单代码的样式问题答案

【问题标题】：Styling issues on simple code between Bootstrap ~3.7 and latest Bootstrap (4)Bootstrap ~3.7 和最新 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>

【问题讨论】：

标签： html css twitter-bootstrap-3 bootstrap-4

【解决方案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>

【讨论】：