Bootstrap 5 NavBar brand为何完全靠左紧贴左侧？

你的代码结构不符合Bootstrap navbar的标准用法，导致navbar-brand紧贴左侧。具体原因和修复方案如下：

原因 #

Bootstrap的navbar组件本身没有默认的左右内边距，它需要通过内部包裹的.container（或.container-fluid）来给品牌和导航项提供响应式的左右内边距。你当前的结构是把整个nav放在外部的.container中，这只会给nav整体添加左右外边距，无法影响内部的navbar-brand元素。

修复方案 #

方案1：使用标准navbar结构（推荐） #

在nav内部添加.container容器，这是Bootstrap官方推荐的用法：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head>
<body>
  <nav class="navbar navbar-expand-sm navbar-dark" style="background-color: green;">
    <div class="container">
      <a class="navbar-brand" href="#">My To Do's</a>
      <div class="collapse navbar-collapse">
        <div class="navbar-nav">
          <a class="nav-item nav-link" routerLink="">Checklist</a>
          <a class="nav-item nav-link" routerLink="all-tasks">All To Dos</a>
          <a class="nav-item nav-link" routerLink="about">About</a>
        </div>
      </div>
    </div>
  </nav>
</body>
</html>

方案2：手动添加内边距 #

如果不想调整结构，可以给navbar添加Bootstrap的spacing类（如.px-3）来设置左右内边距：

<nav class="navbar navbar-expand-sm navbar-dark px-3" style="background-color: green;">
  <a class="navbar-brand" href="#">My To Do's</a>
  <div class="collapse navbar-collapse">
    <div class="navbar-nav">
      <a class="nav-item nav-link" routerLink="">Checklist</a>
      <a class="nav-item nav-link" routerLink="all-tasks">All To Dos</a>
      <a class="nav-item nav-link" routerLink="about">About</a>
    </div>
  </div>
</nav>

内容的提问来源于stack exchange，提问作者Nick Hodges