HTML 从 Bootstrap 3 导航栏折叠中排除菜单项

在本文中，我们将介绍如何在使用 Bootstrap 3 导航栏时，排除特定的菜单项，使其在折叠时不显示。

阅读更多：HTML 教程

导航栏介绍

Bootstrap 是一种流行的前端框架，可用于构建响应式网站和应用程序。其中的导航栏组件是用于展示网站的页面导航链接和菜单的好方法。在 Bootstrap 3 中，导航栏通常包含一个折叠按钮，当屏幕尺寸较小时，可以将导航项折叠成一个菜单图标，以提供更好的用户体验。

折叠导航栏

在使用 Bootstrap 3 导航栏时，默认情况下，所有导航项都会被折叠为一个菜单图标。然而，有时我们希望排除特定的菜单项，使其不显示在折叠菜单中。

要实现这一目标，我们需要对导航栏的 HTML 结构进行适当的修改。

示例

以下是一个典型的 Bootstrap 3 导航栏的代码示例：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

以上代码包含了一个包括四个导航项的导航栏。当屏幕尺寸较小时，这些导航项会被折叠成一个菜单图标。

要排除特定的菜单项，我们需要将该菜单项从 “navbar-collapse” 类的 div 元素中移除，以防止其被折叠。

例如，如果我们想要排除 “About” 菜单项，我们可以将其代码从 “navbar-collapse” 类的 div 元素中移除，如下所示：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

在以上示例中，我们成功地排除了 “About” 菜单项，使其在折叠菜单中不再显示。