CSS Bootstrap 导航栏在自定义宽度下的折叠媒体查询

在本文中，我们将介绍如何使用CSS和Bootstrap来实现在自定义宽度下折叠Bootstrap导航栏。

阅读更多：CSS 教程

什么是Bootstrap导航栏？

Bootstrap是一个流行的前端框架，它提供了一套用于开发响应式网页的CSS和JavaScript组件。其中最常用的组件之一就是导航栏。导航栏通常用于网站的次要或主要导航，它可以包含链接、下拉菜单和其他交互元素。

Bootstrap导航栏的特点是在小屏幕设备上自动折叠，比如手机或平板电脑。在大屏幕设备上，导航栏会水平排列显示，而在小屏幕设备上，导航栏会垂直排列，并且折叠成一个汉堡菜单。

如何使用Bootstrap导航栏？

要使用Bootstrap导航栏，我们首先需要引入Bootstrap的CSS和JavaScript文件。可以通过在HTML文件的头部添加以下代码来实现：

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

请注意，需要在正确的位置引入Bootstrap文件，以确保样式和脚本能够正确加载。

接下来，我们可以开始编写导航栏的代码。导航栏通常包含在一个<nav>标签中，而导航栏的内容则是包含在一个<ul>标签中的多个<li>标签中。下面是一个基本的Bootstrap导航栏的代码示例：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

在上面的代码中，我们使用了Bootstrap的CSS类来定义导航栏的外观和布局。navbar-expand-lg类将导航栏设置为在大屏幕设备上展开，navbar-light bg-light类定义了导航栏的背景颜色。navbar-brand类定义了导航栏中的品牌标志。navbar-toggler按钮用于在小屏幕设备上折叠导航栏。collapse navbar-collapse定义了导航栏折叠时要隐藏的内容。navbar-nav类定义了导航栏中链接的样式。

在自定义宽度下折叠导航栏

默认情况下，Bootstrap导航栏在小屏幕设备上的宽度是576px。但是，如果我们希望在不同的自定义宽度下折叠导航栏，我们可以使用CSS媒体查询来实现。

首先，我们需要定义一个新的CSS类来设置导航栏在自定义宽度下的样式。例如，我们可以使用以下代码将导航栏在480px宽度下折叠：

@media (max-width: 480px) {
  .navbar-collapse {
    display: none !important;
  }

  .navbar-toggler {
    display: block !important;
  }
}

在上面的代码中，我们使用了一个CSS媒体查询来指定在宽度小于或等于480px时应用的样式。在这个样式中，我们将.navbar-collapse设置为display: none !important;，这将导致导航栏在此宽度下折叠。同时，我们也将.navbar-toggler设置为display: block !important;，这将导致汉堡菜单按钮在此宽度下显示。

示例说明

让我们通过一个具体的示例来说明如何在自定义宽度下折叠Bootstrap导航栏。假设我们希望在800px宽度以下的设备上折叠导航栏。

首先，我们需要修改CSS代码如下：

@media (max-width: 800px) {
  .navbar-collapse {
    display: none !important;
  }

  .navbar-toggler {
    display: block !important;
  }
}

接下来，我们只需要将自定义宽度下的折叠样式应用到导航栏中，具体方法如下：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

在上面的代码中，我们只需将修改后的CSS样式媒体查询代码添加到我们的CSS文件中，并将需要折叠导航栏的自定义宽度写入媒体查询。然后，我们将带有导航栏内容的HTML代码插入到适当的位置。