Bootstrap 导航栏两个或多个项目对齐答案

【问题标题】：Bootstrap navbar two or more item alignmentBootstrap 导航栏两个或多个项目对齐
【发布时间】：2020-04-14 05:26:55
【问题描述】：

所以我试图为一个大学项目制作一个网站，我需要用 bootstrap 做一个导航栏。问题是，当我将新的nav-item 元素添加到导航栏时，它们在 Y 轴上彼此对齐，我想水平对齐它们

这就是我现在所拥有的

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  </head>
  <body>

    <nav class="navbar sticky-top navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Home Page</a>

      <ul class="nav navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Item One</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item Two</a>
        </li>

      </ul>

    </nav>

  </body>
</html>

这就是项目的显示方式。

如何水平对齐“项目一”和“项目二”？

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

根据Bootstrap's documentation，您必须指定包装：

导航栏需要一个带有 .navbar-expand{-sm|-md|-lg|-xl} 的包装 .navbar 用于响应式折叠和配色方案类。

只需将此添加到您的 <nav> 项目中：

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Home Page</a>

      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Item One</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item Two</a>
        </li>

      </ul>

    </nav>

【讨论】：