Codepen Bootstrap 格式错误答案

【问题标题】：Codepen Bootstrap wrong formattingCodepen Bootstrap 格式错误
【发布时间】：2017-05-29 03:41:15
【问题描述】：

我使用 Atom 为 FreeCodeCamp 编写了一个小型网站，一切都很好。但是，当我尝试将代码复制并粘贴到 CodePen 中时，它的格式错误。见here。

请在下面找到导航栏的 HTML 和 CSS：

    <!-- NAVIGATION -->
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">10"88</a>
      </div>
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </nav>

    /* -- NAVBAR -- */
.navbar {
  margin-bottom: 0;
}

.navbar-default {
  background-color: white;
  border-color: white;
  border-radius: 0;
}

.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a {
  color: black;
}

.navbar-default .navbar-brand:hover {
  color: white;
  background-color: #AE1429;
}

.navbar-default .navbar-nav .active > a {
  color: white;
  background-color: #AE1429;
}

.navbar-default .navbar-nav > li > a:hover {
  color: white;
  background-color: #AE1429;
}

我不明白为什么我的导航栏（和图像）看起来好像是在一个小视口上查看的。有什么建议吗？

【问题讨论】：

标签： twitter-bootstrap codepen

【解决方案1】：

您正在尝试将 Bootstrap 3 类与 bootstrap 4 alpha 一起使用。看看documentation：没有navbar-fixed-top 或navbar-default。

只需将设置中的链接替换为https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css 一切都会好起来的。

【讨论】：