Flask中Bootstrap导航栏左移、登录组件变形的修复咨询

问题根源分析 #

1. DOM结构错乱：login.html在{% block content %}中错误插入</head>和<body class="text-center">标签，base.html已完整定义页面的head和body结构，额外的标签会导致浏览器解析DOM时出现异常，直接引发布局错位。
2. 重复引入样式冲突：base.html已通过CDN加载Bootstrap CSS，login.html再次引入本地Bootstrap文件，造成样式规则重复覆盖，干扰Navbar和登录组件的正常布局。
3. 自定义CSS错误：styles.css中重复定义.navbar样式，且存在body选择器拼写错误（写成.body），进一步破坏页面布局逻辑。

修复步骤 #

1. 修正login.html的结构与重复引入问题 #

删除login.html中多余的页面结构标签和重复的Bootstrap CSS引入，仅保留登录组件相关内容：

{%extends 'base.html'%}
{%block title%}Login{%endblock%}

{% block content %}
<link href="/static/css/signin.css" rel="stylesheet">

<main class="form-signin">
<form method="POST">
<img class="mb-4" src="/static/logo.png" alt="" width="72" height="57">
<h1 class="h3 mb-3 fw-normal">Sign In</h1>

<div class="form-floating">
  <input type="email" class="form-control" id="email" placeholder="name@example.com" name="email">
  <label for="email">Email address</label>
</div>
<div class="form-floating">
  <input type="password" class="form-control" id="password" placeholder="Password" name="password">
  <label for="password">Password</label>
</div>

<div class="checkbox mb-3">
  <label>
    <input type="checkbox" value="remember-me"> Remember me
  </label>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>

</form>
</main>
{% endblock %}

2. 修复styles.css中的冲突与错误 #

• 合并重复的.navbar样式定义
• 修正body选择器的拼写错误（将.body改为body）
  修改后的styles.css关键部分如下：

/* 合并Navbar样式，避免重复定义 */
.navbar {
  background: #0a465d !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

/* 修正body选择器拼写 */
body {
  text-align: left !important;
}

/* 以下保留原有其他样式 */
html {
  scroll-behavior: smooth;
}

.backtohome {
  height: 25px;
  width: 25px;
  padding-left: 3px;
  padding-top: 2px;
}

.cypherlearn {
  padding: 0px;
}

.signup {
  padding-right: 5px;
}

.nav-link {
  color: #ffffff !important;
}

/*DROPDOWN LAB */
.dropbtn {
  background-color: #04aa6d;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

/*LOGIN PAGE*/
.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}

.main-content {
  margin-top: 70px;
}

3. 单独设置登录页面文本居中（可选） #

避免修改全局body样式，在signin.css中添加针对登录组件的居中规则：

.form-signin {
  text-align: center;
}

4. 修复Navbar折叠按钮的Bootstrap 5兼容问题 #

base.html中使用的data-toggle和data-target是Bootstrap 4的属性，Bootstrap 5需改为data-bs-toggle和data-bs-target，否则折叠按钮无法正常工作：

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

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