html - 为什么这个简单的 Bootstrap 导航栏中的列表项会相互碰撞？-6ren

html - 为什么这个简单的 Bootstrap 导航栏中的列表项会相互碰撞？

转载作者：太空宇宙更新时间：2023-11-03 21:14:21

25

4

我正在跟上 Bootstrap 的速度。首先，我正在创建一个简单的可折叠导航栏。我遵循了 getbootstrap.com 中的基本说明如下所述，但导航栏显示不正确，菜单项相互碰撞，看起来一点也不像the example。在 getbootstrap.com 上。

首先，我根据 getting started 复制了示例 HTML 模板页面建议:

 <!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>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

接下来，我将 CSS 和 Javascript 文件位置更改为使用 MaxCDN 托管的文件，完全遵循入门页面上的代码。

<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>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>  

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>

最后，我使用 components section 上的代码向主体添加了一个简单的导航栏。 getbootsrap 文档。

完成的文件是:

<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>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <nav class="navbar navbar-default">
    <div class="collapse navbar-collapse" id="menuitems">
        <ul class="navbar navbar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Skills</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>


</nav>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>

问题是导航栏看起来像这样:

Chrome 和 Firefox 显示相同。

Here是问题的代码笔。

我错过了什么？

最佳答案

在你的代码中，你写了

 <ul class="navbar navbar-nav">

代替 .navbar 将 .nav 放在 ul 中，代码运行良好

 <ul class="nav navbar-nav">

代码如下: https://codepen.io/animaxf/pen/YVGBmG

关于html - 为什么这个简单的 Bootstrap 导航栏中的列表项会相互碰撞？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43601636/

25

4

0

文章推荐： c# - 在 Visual Studio 编辑器中删除空格指示器

文章推荐： python - 从类定义中的列表理解访问类变量

C++ 相互 header 包含和前向声明
这个问题已经有答案了: Resolve build errors due to circular dependency amongst classes (12 个回答) 已关闭 3 个月前。如何允许
java - 多个组件 "linked"相互
让 2 个 Swing 部件做同样的工作是很常见的。例如，我们可以在工具栏中使用一个 button 作为“保存”按钮，而 JMenuItem (文件保存...)也可以做同样的事情。我的问题是: 有没
Android 相互 fragment 化
我使用 fragment 已经有一段时间了，但我经常遇到一个让我烦恼的问题。 fragment 有时会相互吸引。现在，我设法为此隔离了一个用例，它是这样的: Add fragment A(也使用 ad
WCF 相互 SSL 安全什么时候使用什么证书？
我正在使用具有相互 SSL 安全性的 WCF 服务，我想检查一下我对何时使用什么证书的理解。这是正确的吗？客户端将客户端公共(public)证书交给服务器服务器将服务器公共(public)证书交
security - 相互 SSL - 多少身份验证就足够了？
假设您有一个相互 SSL 服务，除了 SSL 之外，它还有应用程序身份验证。因此，客户端提供证书(以及服务器)，但客户端请求(例如 REST 请求)还包含后端应用程序服务器用于验证的用户名/密码。就
多个设备上的 Android UiAutomator，相互 react
有人让 Android uiautomator 可以同时在多个设备上运行，但做不同的事情吗？我的意思是，我希望我的测试同时启动设备和应用程序，然后设备 A 执行设备 B 必须使用react的操作。这
python - 相互 TLS 身份验证 - SSLV3_ALERT_UNSUPPORTED_CERTIFICATE
我目前正在尝试在客户端和服务器之间实现双向 TLS 身份验证。我遇到了一个 SSL 错误，它的描述性不强。 StackOverflow 也没有太多与之相关的问题，因为大多数时候它是互联网上的单向 TL
javascript - 多个 slider 相互 react
这里是新手。我正在做我的第一个元素，我想为不同的人(普通人、 worker 、农民等)提供 slider ，但我不知道如何放置多个 slider 以及如何让它们全部工作。我从 W3schools 获取
jquery - 如何阻止我的内部 div 相互 float
我创建了一张翻转卡片，但卡片内的所有 div 似乎都浮在彼此之上。我希望 div 彼此相邻。我看了很多问题，但似乎找不到答案。我尝试了多种显示:内联；职位:相对；向左飘浮;清除:两者；但我似乎无法让
jquery - 使多个 div 相互 float
我正在使用此控件来安排时间。我有一个单选按钮列表，然后是多个内容 Pane 。根据内容，我想在正确的控件中淡入淡出。但出于某种原因，在 div 上放置一个 float 并设置 z-index 并不能使
ssl - Wireshark 解密 SSL 相互
有什么方法可以解密双向 SSL(客户端和服务器，两种方式)？我找到了这个链接:https://www.wireshark.org/lists/wireshark-users/201001/msg00
security - 相互 SSL 与基于 token 的身份验证
我正在开发一个 Web 应用程序，安全性是我们在此应用程序中的主要关注点之一。我正在查看不同的 API 安全方法(在 OWASP 中提到)，无法理解相互 SSL 身份验证和基于 token 的身份验证
Kubernetes pod 无法使用 ClusterIP 相互 ping 通
我正在尝试使用分配给 kube-dns 服务的集群 IP 从 dnstools pod ping kube-dns 服务。 ping 请求超时。在同一个 dnstools pod 中，我尝试使用暴露的
c# - .NET 相互 SSL 握手 'Client Authentication'
过去几天我一直在研究这个问题，但我一无所获。场景是: 现场的 iOS 应用程序将调用我的 REST 服务 (.NET)。我的 REST 服务将使用相互 SSL 握手调用 Apache Web 服务。
java - 多个 JSlider 相互 react 始终等于 100%
我正在尝试向 java swing 应用程序添加 3 个 JSlider，以便三个 slider 的总值(value)总和为 100。每个 slider 都是一个概率， slider A 是将值添加到
java - 相互 SSL - 使用 java 作为客户端时，客户端证书链为空
我们正在使用 java 客户端(openJDK 1.8.0) 调用需要相互身份验证的 api。为此，我们使用 Java 标准 JKS 文件作为 keystore 和信任库(包含信任证书和身份证书/私钥
java - 相互 SSL : unsupported_certificate and client certificate format
有人告诉我使用双向身份验证连接到客户的服务器。服务器身份验证工作顺利，但我们在获取客户端身份验证方面遇到了巨大的麻烦。让我试着解释一下我们的麻烦。前段时间我公司在 GeoTrust 购买了一个证书，
authentication - Paw - 支持 https 相互(客户端证书)身份验证？
正在试用 PAW 并且非常喜欢它。我唯一无法正常工作的是使用 HTTPS 相互身份验证。我需要与之交互的一些 API 需要相互验证的 https。如何告诉 PAW 使用证书进行身份验证？该证书已经在
spring - cxf 相互 SSL 配置外部化 key 和密码以使用 JNDI
我们有一个在 Jboss EAP 5.1 中部署并使用 Spring 2.5 已经运行了一年多的 CXF webservice 我们现有的客户证书管理策略如下: 对于非 PROD，证书名为“NAME-
c# - 相互 SSL 身份验证 - sslstream 中的本地证书返回 'null' 而不是客户端上的证书
我正在创建一个将调用 API 的 Windows 服务。对于这个过程，我正在尝试建立相互(双向)SSL 身份验证。因为我是新手。我尝试实现一个简单的客户端和服务器项目，它们将相互进行身份验证。我已经

首页

博学

6Ren·AI

商城

html - 为什么这个简单的 Bootstrap 导航栏中的列表项会相互碰撞？