Question

所以我正在线上学习教程（http://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/）并严格遵守代码，但出于某种原因，我的导航栏并没有按照应有的方式出现。我的朋友（对web开发人员更有经验）快速查看了代码，但无法弄清楚出了什么问题。所以我想我会在这里发布我的问题。

html code (left), actual page (right)

我还会告诉你我的工作目录（以防万一你想知道这些文件是否都在同一个目录中）：

enter image description here

以下是您希望自己尝试的代码

<!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>

Answer 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版本，而不是您下载和使用的版本。

Answer 2

在我的情况下，我尝试了一些基于Bootstrap 版本3 在互联网上找到的代码，但我的应用程序基于bootstrap 版本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。

Answer 3

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

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

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

希望这有帮助

Answer 4

遇到了您的问题，因为我正在寻找使用引导程序创建垂直导航栏。我知道这个问题是要做相反的事情，但是由于该线程在搜索“垂直引导列表垂直”时位于Google的最顶端，因此我想我会留下解决方案在这里找到。

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

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

干杯！

Answer 5

如果要使导航栏始终保持水平，请像这样进行操作：

<nav class="navbar navbar-expand">

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

Answer 6

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

<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>

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

6 个答案: