使用 HTML、CSS 和 Bootstrap 的导航栏间距

Question

我有以下代码：

<nav class="navbar navbar-expand-lg">``
  <div class="container-fluid">
    <a class="navbar-brand" href="#"
      ><img src="./images/kiratina_logo.png" alt="logo"
    /></a>
    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-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 mr-auto">
        <!-- Use mr-auto here -->
        <li class="nav-item">
          <a class="nav-link" href="#">Why Water</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Our Work</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About Us</a>
        </li>
      </ul>
      <ul class="navbar-nav ml-auto">
        <!-- Use ml-auto here -->
        <li class="nav-item">
          <a class="nav-link" href="#">Donate</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

我试图将徽标放在导航栏上居中，但我堆叠在列表中，因为我想在 ul 类 navbar-nav mr-auto 和 ul 类 navbar-nav ml-auto 之间创建一个空格，我该怎么办因为我真的很堆栈，我需要像昨天一样完整的导航栏。

我试图将徽标放在导航栏上居中，但我堆叠在列表中，因为我想在 ul 类 navbar-nav mr-auto 和 ul 类 navbar-nav ml-auto 之间创建一个空格，我该怎么办因为我真的很堆栈，我需要像昨天一样完整的导航栏。

Answer 1

1. 要将徽标居中，您必须将类

   mx-auto

   添加到

   <a class="navbar-brand">

   元素。该类设置水平 margin 为 auto，将徽标置于其父容器的中心。

就像下面的代码，

<a class="navbar-brand mx-auto" href="#">
  <!-- use mx-auto to center the logo. -->
  <img src="./images/kiratina_logo.png" alt="logo" />
</a>

2. 要在列表之间创建空间，您必须将第一个

   mr-auto

   元素的

   me-auto

   更改为

   <ul class="navbar-nav">

   。

   me-auto

   类 (Bootstrap 5) 或

   mr-auto

   类 (Bootstrap 4) 将右边距设置为自动，将内容推到左侧，在徽标和第一个列表之间创建空间，并将

   ml-auto

   更改为

   ms-auto

   对于第二个

   <ul class="navbar-nav">

   元素。

   ms-auto

   类 (Bootstrap 5) 或

   ml-auto

   类 (Bootstrap 4) 将左边距设置为自动，将内容推到右侧，在第一个和第二个列表之间创建空间。

就像下面的代码， 这是第一个列表

<ul class="navbar-nav me-auto">
  <!-- Use me-auto (Bootstrap 5) or mr-auto (Bootstrap 4) for the first list -->
  <!-- ... -->
</ul>

这是第二个列表

<ul class="navbar-nav ms-auto">
  <!-- Use ms-auto (Bootstrap 5) or ml-auto (Bootstrap 4) for the second list -->
  <!-- ... -->
</ul>