Bootstrap网格布局异常：如何让Logo与登录表单水平对齐？

使用Bootstrap开发客户端页面时，遇到登录表单比例变形问题，希望将Logo与登录表单放置在同一水平平面。查阅官方文档后未找到解决方向，需要解决方案或指引。

解决方案 #

1. 修复样式加载顺序 #

模板中先加载自定义CSS、后加载Bootstrap官方CSS的顺序会导致Bootstrap样式被覆盖，引发布局异常。调整为先加载Bootstrap CSS，再加载自定义CSS。

2. 实现Logo与表单垂直对齐 #

给包含Logo和表单的row添加align-items-center类，让两个元素在同一水平高度对齐；可额外添加min-vh-100类，让整个登录区域垂直居中在页面，优化视觉体验。

3. 限制表单宽度 #

调整表单所在列的宽度（比如用col-md-5替代col-md-6），或给表单容器添加max-width相关样式，避免大屏下表单过度拉伸变形。

4. 兼容Bootstrap 5 Tooltip初始化 #

Bootstrap 5的Tooltip初始化方式与旧版不同，替换原有JS代码为官方标准写法。

修改后的代码 #

模板文件（TemplateAR.blade.php） #

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="{{ asset('images/logo.ico') }}"/>
    <!-- 先加载Bootstrap官方CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <!-- 再加载自定义CSS -->
    <link rel="stylesheet" href="{{ asset('css/TemplatesAR.css') }}">
    <script src="{{ asset('js/jquery-3.7.1.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <title>@yield('title', '')</title>
</head>
<body>
    {{-- Встраиваемая логика вне шаблона --}}
    @yield('content')

    {{-- 初始化Bootstrap 5 Tooltip --}}
    <script>
        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
        const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>
</body>
</html>

登录页面（Authorization.blade.php） #

{{-- Authorization.blade.php --}}
@extends('Pattern.TemplateAR')

@section('title', 'Авторизация')

@section('content')
<div class="Block-TemplatesAR">
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <!-- 添加垂直对齐和视口高度类 -->
    <div class="row justify-content-center align-items-center min-vh-100">
        <!-- 调整Logo列宽度，居中显示 -->
        <div class="col-md-4 d-flex justify-content-center">
            <img src="{{ asset('images/Логотип.png') }}" alt="Логотип" class="img-fluid" style="max-height: 200px;">
        </div>

        <!-- 调整表单列宽度，限制表单拉伸 -->
        <div class="col-md-5">
            <form action="{{ url('/authenticate') }}" method="post" class="p-4 p-md-5 border rounded-5 bg-white shadow-sm">
                <h1 class="h3 mb-3 fw-normal">Авторизация</h1>
                @csrf

                <div class="form-floating mb-3">
                    <input type="email" class="form-control" id="email" name="email" placeholder="name@example.com" autocomplete="email" required>
                    <label for="email">Электронная почта</label>
                </div>

                <div class="form-floating mb-4">
                    <input type="password" class="form-control" id="password" name="password" placeholder="Password" required>
                    <label for="password">Пароль</label>
                </div>

                <div class="form-check text-start my-4">
                    <!-- 替换为Bootstrap 5的Tooltip属性 -->
                    <input class="form-check-input" type="checkbox" value="remember-me" id="flexCheckDefault" data-bs-toggle="tooltip" data-bs-placement="top" title="Выберите, чтобы сохранить данные учетной записи для быстрого входа">
                    <label class="form-check-label" for="flexCheckDefault">Запомнить сессию</label>
                </div>

                <button class="w-100 btn btn-primary btn-custom-size" type="submit">Авторизироваться</button>
                <hr class="my-3"> 
                
                <div class="text-center">
                    <small><a href="{{ route('registration') }}" class="text-decoration-none">Зарегистрироваться</a></small>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

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