CSS Bootstrap 4 — 将链接与切换按钮移动到导航栏的右侧

在本文中，我们将介绍如何使用CSS和Bootstrap 4将链接与切换按钮移动到导航栏的右侧。首先，我们需要了解一下什么是Bootstrap和导航栏。

阅读更多：CSS 教程

什么是Bootstrap？

Bootstrap是一个基于HTML、CSS和JavaScript的开源前端框架。它提供了一套用于构建网站和网页的CSS和JavaScript组件，以及灵活的栅格系统，用于构建响应式和移动设备友好的页面。

导航栏

导航栏是网站或应用程序中常见的一个组件，通常用于导航不同的页面或部分。在Bootstrap中，导航栏是一个具有特定样式和功能的组件，可以轻松地创建和自定义。

将链接移动到导航栏的右侧

在Bootstrap 4中，将链接移动到导航栏的右侧可以使用CSS和一些Bootstrap类来实现。

首先，我们需要一个包含链接的导航栏。我们可以使用Bootstrap提供的.navbar类来创建一个基本的导航栏。例如：

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

在上面的示例中，我们使用了.navbar类创建一个导航栏，其中包含一个品牌Logo和一个切换按钮。链接被放置在一个无序列表(<ul>)中的列表项(<li>)中。

为了将链接移动到导航栏的右侧，我们可以使用CSS中的浮动和定位来实现。我们可以创建一个自定义的CSS类，将所有的导航链接都应用该类。例如：

.navbar-nav.right {
  float: right;
  margin-right: 0;
}

在上面的示例中，我们创建了一个名为.navbar-nav.right的自定义CSS类，并将浮动设置为右侧，以及将右边距设置为0。然后，我们通过给导航链接所在的无序列表添加这个自定义类来应用样式。例如：

<ul class="navbar-nav right">
  <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>

现在，链接将会被移动到导航栏的右侧。

使用切换按钮

除了将链接移动到导航栏的右侧，我们还可以添加一个切换按钮，用于在小屏幕设备上显示隐藏的导航链接。

在Bootstrap中，我们可以使用.navbar-toggler类和data-toggle属性创建一个切换按钮，并使用.collapse和.navbar-collapse类创建一个折叠的导航栏。

例如，我们可以将上面示例中的切换按钮部分修改为以下代码：

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

在上面的示例中，我们添加了.navbar-toggler类，并设置了data-toggle属性的值为”collapse”，data-target属性的值为导航栏的ID。这样，当我们点击切换按钮时，导航栏中的链接将被折叠和展开。

示例

为了更好地理解和演示如何将链接与切换按钮移动到导航栏的右侧，下面是一个完整的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <title>Navbar Right Example</title>
  <style>
    .navbar-nav.right {
      float: right;
      margin-right: 0;
    }
  </style>
</head>
<body>
  <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>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

通过将以上代码保存为一个HTML文件，并打开浏览器，您可以体验到一个具有链接和切换按钮的导航栏，其中链接被移动到导航栏的右侧。