Html 引导导航栏显示为垂直列表。。。？_Html_Css_Twitter Bootstrap_Navbar

Html 引导导航栏显示为垂直列表。。。？

html css twitter-bootstrap

Html 引导导航栏显示为垂直列表。。。？,html,css,twitter-bootstrap,navbar,Html,Css,Twitter Bootstrap,Navbar,因此，我正在遵循一个在线教程（）并严格遵循代码，但由于某些原因，我的导航栏并没有以应有的方式显示。我的朋友（他在web开发方面更有经验）快速查看了代码，但无法找出错误所在。所以我想我应该把我的问题贴在这里我还将向您展示我的工作目录（以防您怀疑这些文件是否都在同一目录中）：下面是代码，以防您想自己尝试 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&

因此，我正在遵循一个在线教程（）并严格遵循代码，但由于某些原因，我的导航栏并没有以应有的方式显示。我的朋友（他在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>


我的引导程序

我估计您正在使用最新的引导

您必须将

导航栏默认设置添加到
中，并将导航栏导航添加到
中
这将为您提供以下标记
<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>















对于将来的问题，请在询问之前阅读官方引导文档。他们解释得很详细

我想你的问题是，sitepoint教程使用的是比你下载和使用的版本更旧的引导版本
 在我的例子中，我在互联网上找到了一些基于Bootstrap版本3的代码，但我的应用程序是基于Bootstrap版本4的。这两个版本之间存在重大差异（请参阅）
以下基于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>












搜寻

可以找到官方文件
 我在使用引导v4时遇到了类似的问题。前面的回答代码对我来说效果很好，但只是想澄清一下，使垂直导航栏水平的部分是在主div标记中使用导航栏expand lg
<nav class="navbar navbar-expand-lg">



根据您的屏幕尺寸偏好，将lg更改为其他尺寸（md、sm或xs）也很有帮助
希望这对您有所帮助
如果您希望导航栏始终保持水平，只需如下所示：
<nav class="navbar navbar-expand">



使用navbar expand lg | md | sm
将使其始终在垂直位置的某个点断开。
遇到了您的问题，因为我希望使用引导创建垂直navbar。我知道这个问题正好相反，但是由于在搜索“bootstrap nav list vertical”（引导导航列表垂直）时，这个线程位于google上的最顶端，所以我想我会留下我在这里找到的解决方案
对于似乎无法让引导程序正常工作并呈现垂直列表的任何人，可以使用标记中的引导程序类“.flex column”将水平列表转换为垂直列表
，向下滚动，直到找到副标题“垂直”：
干杯
 我们应该使用药片或标签//在小屏幕上变成垂直的灰色水平导航条//标签使用-导航标签
<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>






您使用的是哪种引导版本？我仍然在使用cdn进行引导）：@Snickers3192如何解决此问题？我现在正面临着这股潮流，我甚至不记得我是怎么想的了，我只是把一切都抹去，做了一些其他的事情，但奇怪的是，lg并不仅仅为我工作。当我使用其他变体时，它确实是这样做的——感觉像是其中的一个bug，但谢谢你。不要在你的评论中添加代码；请编辑您的答案并在那里添加代码。