Flask中Bootstrap模态框标题与关闭按钮对齐异常求助

问题说明 #

模态框标题与关闭按钮（X按钮）无法正确对齐，推测是Bootstrap版本冲突导致，但修改版本会引发全站崩溃，需寻求兼容修复方案。

• 当前效果：
• 预期效果：

相关代码 #

子模板代码 #

{% extends "_base.html" %}

{% block content %}

<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4">
    <main class="form-signin w-100 m-auto">
        {{ form.csrf_token }}
        <h1 class="h3 mb-3 fw-normal text-center">Add funds into balance</h1><br>
        <div class="form-floating">
            <a href="#" data-toggle="modal" data-target="#exampleModal" onclick="crypto">USDT-TRX</a>
            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" style="text-align: start;" id="exampleModalLabel">New message</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <form>
                      <div class="form-group">
                        <label for="recipient-name" class="col-form-label">Recipient:</label>
                        <input type="text" class="form-control" id="recipient-name">
                      </div>
                      <div class="form-group">
                        <label for="message-text" class="col-form-label">Message:</label>
                        <textarea class="form-control" id="message-text"></textarea>
                      </div>
                    </form>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Send message</button>
                  </div>
                </div>
              </div>
            </div>
{% endblock %}

_base.html代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>mysite</title>
    <!-- meta -->
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!-- styles -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <link rel="stylesheet" href="{{url_for('static', filename="styles.css")}}">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
    {% block css %}{% endblock %}
  </head>
  <body>

    {% include "navigation.html" %}

    <div class="container">

      <br>

      <!-- messages -->
      {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
      <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4">
          {% for category, message in messages %}
          <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
           {{message}}
           <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
          {% endfor %}
        </div>
        <div class="col-md-4"></div>
      </div>
      {% endif %}
      {% endwith %}

      <!-- child template -->
      {% block content %}{% endblock %}

    </div>

    <!-- scripts -->
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" type="text/javascript"></script>
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
    {% block js %}{% endblock %}

  </body>
</html>

解决方案 #

核心问题是页面同时引入了Bootstrap 3和Bootstrap 5的CSS/JS，导致样式冲突。以下是无需修改Bootstrap版本的兼容修复方案：

方案一：自定义CSS修复对齐 #

在styles.css中添加以下样式，强制重置模态框头部的布局：

.modal-header {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 15px; /* 匹配Bootstrap3的默认内边距 */
}
.modal-header .close {
    margin: 0 !important;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 21px;
    line-height: 1;
}

这段代码会覆盖冲突的样式，让标题和关闭按钮回到预期的左右对齐、垂直居中状态。

方案二：调整Bootstrap引入顺序（谨慎使用） #

将Bootstrap 3的CSS引入放在Bootstrap 5之后，让Bootstrap3的样式优先级更高：

<!-- 修改后顺序 -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">

注意：此方法可能影响其他依赖Bootstrap5的组件样式，需测试全站兼容性。

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