CSS 堆叠式折叠导航栏在Bootstrap 4中的应用

在本文中，我们将介绍如何使用CSS在Bootstrap 4中创建一个堆叠式折叠导航栏。堆叠式折叠导航栏是一种在小屏幕设备上常见的布局方式，可以有效地利用有限的页面空间，并提供清晰的导航体验。

阅读更多：CSS 教程

1. 创建导航栏结构

在首先，我们需要创建一个基本的导航栏结构。在使用Bootstrap 4时，可以使用内置的导航栏组件。下面是一个基本的导航栏结构示例：

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

在这个示例中，我们使用了navbar类定义导航栏，并为其添加了一些内置的样式类。我们还添加了一个导航栏标志和一个触发按钮，用于在小屏幕上折叠导航栏。导航菜单项以无序列表的形式呈现。

2. 添加CSS样式

为了使导航栏在小屏幕设备上呈现为堆叠式折叠样式，我们需要添加一些自定义的CSS样式。通过设置合适的媒体查询，我们可以改变导航栏的外观并使其在小屏幕上进行堆叠。

首先，我们需要为导航栏中的元素添加样式。以下是一个基本的CSS样式示例：

.navbar-brand {
  font-size: 24px;
  font-weight: bold;
}

.navbar-nav .nav-item .nav-link {
  padding: 10px;
}

.navbar-nav .nav-item.active .nav-link {
  font-weight: bold;
}

.navbar-toggler {
  border: none;
}

.navbar-toggler-icon {
  background-image: none;
  width: 20px;
  height: 20px;
  background-color: #000;
}

在这个示例中，我们为导航栏中的品牌、菜单项和触发按钮添加了不同的样式。你可以根据自己的需要进行调整和修改。

接下来，我们需要添加媒体查询来使导航栏在小屏幕上堆叠。以下是一个实现这一效果的媒体查询示例：

@media (max-width: 768px) {
  .navbar-nav .nav-item {
    display: block;
  }

  .navbar-nav .nav-item .nav-link {
    padding: 10px;
    border-bottom: 1px solid #ccc;
  }

  .navbar-toggler {
    margin-top: 10px;
  }

  .navbar-expand-lg .navbar-collapse {
    display: none !important;
  }

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

在这个示例中，我们使用了媒体查询的最大宽度来定义小屏幕设备的样式。我们将导航菜单项显示为块级元素，并添加了一些间距和边框样式。触发按钮在小屏幕上显示，并将导航菜单折叠起来。