个人中心
gpt4 book ai didi

html - Bootstrap 3 导航栏链接未水平排列

转载 作者：行者123 更新时间：2023-11-28 03:00:02 25 4
gpt4 key购买 nike

有人能告诉我为什么我的链接没有水平排列吗？我正在使用 bootstrap 3。我引用了 bootstrap 网站，我的代码看起来与他们的示例相同。除了 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>

最佳答案

您的无序列表中缺少结束 anchor 标记。

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

JSFiddle

关于html - Bootstrap 3 导航栏链接未水平排列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35107310/

25 4 0
文章推荐： javascript - 从另一个域上的 JavaScript 文件设置 cookie
文章推荐： CSS3 背景图像过渡
文章推荐： c++ - 动态大小的推力元组
文章推荐： javascript - 如何从 JavaScript 代码向 VB.NET 方法发送参数？