代码之家 › 专栏 › 技术社区 › Nick Hodges

为什么我的Bootstrap 5 NavBar品牌一直向左对齐?

twitter-bootstrap css html

Nick Hodges · 技术社区 · 2 年前

我有以下HTML:

<!DOCTYPE html>
<html>

<head>
  <title>Bootstrap Demo</title>

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <nav class="navbar navbar-expand-sm navbar-dark" 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>
  </div>
</body>

</html>

当我看到它的时候,导航品牌在左边被吃掉了。

我是做错了什么,还是必须自己做填充?

1 回复 | 直到 2 年前

Carcigenicate 2 年前

我相信这是因为 navbar 类,它添加填充,默认为 0 对于“x填充”:

/* bootstrap.css */
.navbar {
    --bs-navbar-padding-x: 0;
}

要解决此问题,请给变量一个值:

.navbar {
    /* What the docs use */
    --bs-navbar-padding-x: 0.5rem;
}

推荐文章

xajetin · 导航不更改滚动上的颜色

2 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

2 年前

Bryan Santos · 固定表头与引导

2 年前

Nicolas Berthier · Bootstrap 5基于内容的包装

2 年前

tym · 根据用户偏好显示字段

2 年前

Sheryar Khan · 如何仅使用html、css、bootstrap、javascript/jquery创建html页面?

2 年前

Pavel · 当验证DIV可见时,引导网格会移动

6 年前

Sam · 在标题中嵌入Bootstrap 3导航栏

6 年前

Alexander David · 折叠卡打开,然后立即再次关闭

6 年前

Sandeep Bhardwaj · div的一致行为,与设备分辨率无关

6 年前