CSS Bootstrap 4下的导航栏pills颜色填充全高度

在本文中，我们将介绍如何使用CSS来调整Bootstrap 4中导航栏pills的颜色，并实现填充全高度的效果。

阅读更多：CSS 教程

导航栏介绍

导航栏（Navbar）是网页设计中常用的重要组件之一。在Bootstrap 4中，navbar是通过在HTML标记上添加相应的class来实现的。Navbar pills则是指导航栏中的标签选项卡（tab）样式，常用于创建具有多个标签页的导航栏。

修改导航栏pills颜色

在Bootstrap 4中，修改导航栏pills的颜色可以通过自定义CSS样式来实现。首先，我们需要在HTML标记上添加自定义class，然后使用CSS样式来设置颜色。

例如，我们要将导航栏pills的背景颜色设置为红色，文字颜色设置为白色。可以按照以下步骤进行操作：

在HTML标记上添加自定义class，比如”custom-navbar”：

<nav class="navbar navbar-expand-lg navbar-light custom-navbar">
  <!-- 导航栏内容 -->
</nav>

在CSS样式表中定义.custom-navbar的样式，设置背景颜色和文字颜色：

.custom-navbar {
  background-color: red;
}

.custom-navbar .nav-link {
  color: white;
}

这样，导航栏pills的背景颜色就被修改为红色，文字颜色被修改为白色。你可以根据自己的需求来调整颜色。

填充全高度的效果

默认情况下，Bootstrap 4的导航栏pills在垂直方向上并不会填充满整个导航栏的高度。如果我们希望导航栏pills能够填充全高度，可以使用一些CSS技巧来实现。

以下是一种常用的实现方式：

在HTML标记上添加自定义class，比如”fill-height-navbar”：

<nav class="navbar navbar-expand-lg navbar-light fill-height-navbar">
  <!-- 导航栏内容 -->
</nav>

在CSS样式表中定义.fill-height-navbar的样式，设置填充全高度的效果：

.fill-height-navbar {
  display: flex;
  flex-direction: column;
}

.fill-height-navbar .nav-pills {
  flex: 1;
}

通过在导航栏外层容器使用flex布局，并设置容器的flex-direction为column，再配合flex: 1来使.nav-pills填充剩余的空间，从而实现了填充全高度的效果。

示例

下面是一个完整的示例，展示了如何同时修改导航栏pills的颜色和实现填充全高度的效果：

<style>
.custom-navbar {
  background-color: red;
}

.custom-navbar .nav-link {
  color: white;
}

.fill-height-navbar {
  display: flex;
  flex-direction: column;
}

.fill-height-navbar .nav-pills {
  flex: 1;
}
</style>

<nav class="navbar navbar-expand-lg navbar-light custom-navbar fill-height-navbar">
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" href="#">首页</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">产品</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">服务</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">关于</a>
    </li>
  </ul>
</nav>

在上述示例中，我们使用了两个自定义class，custom-navbar来修改导航栏pills的颜色为红色和文字颜色为白色，fill-height-navbar实现了填充全高度的效果。