CSS Bootstrap 4带有2行的导航栏

在本文中，我们将介绍如何使用CSS和Bootstrap 4创建一个带有两行的导航栏。导航栏是网站的关键组成部分之一，它可以帮助用户快速浏览和导航到网站的不同部分。通过添加两行导航栏，我们可以更好地组织和展示网站上的导航选项。

阅读更多：CSS 教程

创建导航栏

要创建一个带有2行的导航栏，首先我们需要引入Bootstrap样式表。在<head>标签中添加以下代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

然后，我们可以使用以下代码创建一个基本的导航栏：

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

这是一个基本的Bootstrap导航栏结构。其中，navbar类定义导航栏的基本样式，navbar-expand-lg类表示导航栏应在大屏幕上展开，navbar-light bg-light类定义导航栏的背景颜色。在导航栏中，我们可以使用<a>标记创建导航链接，<ul>和<li>标记用于包装导航链接。

这个基本的导航栏将在一行中显示所有导航链接。如果我们希望将导航链接分为两行，则需要使用一些CSS来实现。

实现两行导航栏

为了实现两行导航栏，我们可以添加一个navbar-nav-flex-row类来覆盖默认的导航链接布局。在代码中，我们需要将所有的导航链接包装在一个div元素中，并为这个div元素添加navbar-nav-flex-row类。同时，我们还需要在CSS中为这个类添加一些样式来实现导航链接的换行。

以下是修改后的代码：

<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">
    <div class="navbar-nav navbar-nav-flex-row">
      <a class="nav-item nav-link" href="#">Home</a>
      <a class="nav-item nav-link" href="#">About</a>
      <a class="nav-item nav-link" href="#">Services</a>
      <a class="nav-item nav-link" href="#">Contact</a>
    </div>
  </div>
</nav>

我们还需要在CSS中添加以下样式来实现导航链接的换行效果：

.navbar-nav-flex-row {
  flex-wrap: wrap;
}
.nav-item {
  width: 50%;
  text-align: center;
}

以上样式中，.navbar-nav-flex-row类中的flex-wrap: wrap;属性将导航链接包装在多行中。.nav-item类中的width: 50%;属性将导航链接的宽度设置为50%，使其在一行上显示两个链接。text-align: center;属性用于居中导航链接的文本。

现在，我们就成功地创建了一个带有两行导航链接的导航栏。