Html 引导3导航条链接未水平排列_Html_Css_Twitter Bootstrap

Html 引导3导航条链接未水平排列

html css twitter-bootstrap

Html 引导3导航条链接未水平排列,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,有人能告诉我为什么我的链接没有水平排列吗？我用的是bootstrap3。我引用了bootstrap网站，我的代码与他们的示例完全相同。我没有使用任何自定义CSS以外的引导库，所以我不知道如何补救，任何援助很高兴感谢 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" con

有人能告诉我为什么我的链接没有水平排列吗？我用的是bootstrap3。我引用了bootstrap网站，我的代码与他们的示例完全相同。我没有使用任何自定义CSS以外的引导库，所以我不知道如何补救，任何援助很高兴感谢

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <title>Test</title>
    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  </head>
  <body>

    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainnav" 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>
         </div>

         <!-- the nav links, forms, and other content for toggling -->
         <div class="navbar-collapse collapse" id="mainnav">
            <ul class="nav navbar-nav">
              <li><a href="#">Home</li>
              <li><a href="#">About</li>
              <li><a href="#">Contact</li>
            </ul>
          </div>
       </div>
     </nav>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
  </body>
</html>


试验
切换导航

家
关于
接触

无序列表中缺少结束锚标记

<li><a href="#">Home<</a>/li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>

导航：


切换导航

<nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
           </button>
         </div>

         <!-- the nav links, forms, and other content for toggling -->
         <div class="navbar-collapse collapse" id="mainnav">
            <ul class="nav navbar-nav">
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
       </div>
     </nav>