Bootstrap 实现一个响应式图标和内容居中的导航栏

可以使用以下代码实现一个响应式的导航栏，并且使内容居中：

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
    </ul>
  </div>
</nav>

这段代码中的`navbar-expand-md`类将导航栏设为响应式的，当屏幕宽度小于 `md` （中等）时，导航栏会折叠，并在点击按钮时展开。`navbar-dark bg-dark`类设置导航栏的背景为黑色，并且文本颜色为白色。`navbar-toggler`按钮可以切换折叠状态。`collapse navbar-collapse`的类定义了折叠时要隐藏的内容。`justify-content-center`类将内容居中。在`ul`列表中的每个`li`项中包含一个链接，链接的文本被放置在`nav-link`类中。