Html 引导导航栏垂直显示，而不是水平显示

我正在用CodePen做一个项目，我正在用bootstrap做一个导航条。但由于某种原因，它是垂直显示而不是水平显示。即使我复制并粘贴示例和示例中的代码。我不知道还能做什么。请帮忙

---

这是W3Schools示例代码：

---

这是Bootstrap网站上的示例代码：

切换导航















提交

---

两者都不起作用。是的，我已经三次检查了我的

和

标签

---

编辑：

如有人所说-从加载的CSS文件中删除bootstrap 4，它将首先起作用

就像在注释中一样，您正在使用bootstrap 3标记并链接到bootstrap 3和bootstrap 4删除bootstrap 4 CSS。然后您需要使用类为

collapse-navbar-collapse

的div，因此只需将其添加到id为

nav

的div中，如下所示：

<nav class="navbar navbar-inverse">
  <div class="container-fluid">

    <div class="navbar-header">
      <a class="navbar-brand" href="#about">
        <span style="font-family: 'Source Code Pro', Monospace; color:green"><i class="fa fa-code"></i>Ryan</span></a>
    </div>
    <div class="collapse navbar-collapse"  id="nav">
    <ul class="nav navbar-nav">
      <li><a href="#about">About</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    </div>
  </div>
</nav> 

您可能需要将折叠按钮添加到导航栏标题，否则您的链接将不会显示在移动宽度上，因此看起来像：

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" aria-expanded="false">
        <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="#about">
        <span style="font-family: 'Source Code Pro', Monospace; color:green"><i class="fa fa-code"></i>Ryan</span>
      </a>
    </div>
    <div class="collapse navbar-collapse"  id="nav">
    <ul class="nav navbar-nav">
      <li><a href="#about">About</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    </div>
  </div>
</nav> 

切换导航

您是否在文档中链接到了引导库？能否共享到代码笔的链接，以便我们查看？如果可能，请检查您的浏览器控制台here@trevorp您正在代码笔中混合引导3和引导4 Alpha。移除Boostrap 4会产生预期的行为。

<nav class="navbar navbar-inverse">
  <div class="container-fluid">

    <div class="navbar-header">
      <a class="navbar-brand" href="#about">
        <span style="font-family: 'Source Code Pro', Monospace; color:green"><i class="fa fa-code"></i>Ryan</span></a>
    </div>
    <div class="collapse navbar-collapse"  id="nav">
    <ul class="nav navbar-nav">
      <li><a href="#about">About</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    </div>
  </div>
</nav> 

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" aria-expanded="false">
        <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="#about">
        <span style="font-family: 'Source Code Pro', Monospace; color:green"><i class="fa fa-code"></i>Ryan</span>
      </a>
    </div>
    <div class="collapse navbar-collapse"  id="nav">
    <ul class="nav navbar-nav">
      <li><a href="#about">About</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    </div>
  </div>
</nav>