Bootstrap Navbar 显示为垂直列表...？答案

【问题标题】：Bootstrap Navbar appears as vertical list...?Bootstrap Navbar 显示为垂直列表...？
【发布时间】：2014-03-24 09:47:46
【问题描述】：

所以我正在关注在线教程 (http://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/) 并完全按照代码进行操作，但由于某种原因，我的导航栏没有按应有的方式显示。我的朋友（他对 web 开发经验更丰富）快速查看了代码，但无法找出问题所在。所以我想我会在这里发布我的问题。

我还将向您展示我的工作目录（以防您想知道文件是否都在同一个目录中）：

这里是代码，如果你想自己尝试一下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My bootstrap</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>

    <div class="container">
        <h1><a href="#">Bootstrap Site</a></h1>
        <div class="navbar">
            <div class="navbar-inner">
                <div class="container">
                    <ul class="nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">Projects</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Downloads</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>


    </div>

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
</body>

【问题讨论】：

您使用的是哪个 Bootstrap 版本？

标签： html css twitter-bootstrap navbar

【解决方案1】：

我假设您使用的是最新的 Bootstrap。

您必须将 navbar-default 添加到您的 <div class="navbar"> 和 navbar-nav 到您的 <ul class="nav">。

这会为您提供以下标记。

<div class="container">
  <h1><a href="#">Bootstrap Site</a></h1>
  <div class="navbar navbar-default">
    <div class="navbar-inner">
      <div class="container">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
           <li><a href="#">Projects</a></li>
           <li><a href="#">Services</a></li>
           <li><a href="#">Downloads</a></li>
           <li><a href="#">About</a></li>
           <li><a href="#">Contact</a></li>
       </ul>
    </div>
 </div>

Working Example

对于未来的问题，请在此处提问之前尝试阅读官方 Bootstrap 文档。他们非常详细地解释了一切。

BT Navbar

我猜您的问题是，sitepoint 教程使用的 Bootstrap 版本比您下载和使用的版本旧。

【讨论】：

我仍然在使用 CDN 进行引导）：
@Snickers3192 你是如何解决这个问题的？我现在正面临这个电流..
伙计，我什至不记得我只是把它全部抹掉并做了其他事情

【解决方案2】：

就我而言，我尝试了一些基于 Bootstrap version 3 在互联网上找到的代码，但我的应用程序基于 bootstrap version 4。两个版本之间存在重要差异（请参阅here）。

以下基于 v4 的代码适用于我：

<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>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

官方文档可以在here找到。

【讨论】：

【解决方案3】：

我在使用 bootstrap v4 时遇到了类似的问题。以前的答案代码对我来说效果很好，但只是想澄清使垂直导航栏水平的部分是在主 div 标签中使用 navbar-expand-lg。

<nav class="navbar navbar-expand-lg">

根据您的屏幕尺寸偏好，将 lg 更改为其他尺寸（md、sm 或 xs）也很有帮助。

希望对你有帮助

【讨论】：

确实如此 - 但奇怪的是 -lg 不仅仅对我有用。当我使用其他变体时，它确实存在 - 感觉就像是某个地方的错误，但谢谢。

【解决方案4】：

如果您希望您的导航栏始终是水平的，只需将其设置为：

<nav class="navbar navbar-expand">

使用navbar-expand-lg|md|sm 会使其始终在某个点断开到垂直位置。

【讨论】：

【解决方案5】：

遇到了你的问题，因为我想用 bootstrap 创建一个垂直导航栏。我知道这个问题正好相反，但是由于在搜索“bootstrap nav list vertical”时，这个线程在谷歌上是最重要的，我想我会留下我的解决方案在这里找到。

对于似乎无法让引导程序运行并呈现垂直列表的任何人，您可以使用标签中的引导程序类“.flex-column”将水平列表转换为垂直列表。

Here's the page in the Bootstrap documentation，向下滚动直到找到子标题“垂直”：

干杯！

【讨论】：

【解决方案6】：

我们应该使用药丸或标签 //在小屏幕上变成垂直的灰色水平导航栏 // 用于标签使用 - nav nav-tabs

<nav class="navbar navbar-expand-sm-bg-light"> 
 <ul class="nav nav-pills">
 <li class="nav-item"><a class="nav-link" href ="#">Home</a></li>
  <li class="nav-item"><a class="nav-link" href ="#">Projects</a></li> 
 </ul>
 </nav>

【讨论】：

不要在你的 cmets 中放代码；请编辑您的答案并在此处添加代码。