如何在 Bootstrap 网格中正确放置对象

Question

我正在慢慢转向使用 Bootstrap 开发客户端。我无法以任何方式弄清楚为什么授权表的比例会变形......我只是想将徽标和授权表放置在同一水平面上。告诉我如何做得更好，或者为我指明正确的方向。

.

授权表本身：

{{-- 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-md-left">
    <div class = "col-md-6">
    <img src   = "{{ asset('images/Логотип.png') }}" alt = "Логотип" class = "img-fluid">
    </div>

    <div class="col-md-6">
            <form action="{{ url('/authenticate') }}" method="post" class="p-4 p-md-5 border rounded-5 bg-white">
                <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="[email protected]" 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">
                    <input class="form-check-input" type="checkbox" value="remember-me" id="flexCheckDefault" data-toggle="tooltip" data-placement="top" title="Выберите, чтобы сохранить данные учетной записи для быстрого входа">
                    <label class="form-check-label" for="flexCheckDefault">Запомнить сессию</label>
                </div>

                <button class="w-100 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

启用 Bootstrap 的模板表单本身：

<!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') }}"/>
    <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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <title>@yield('title', '')</title>
</head>
<body>
    {{-- Встраиваемая логика вне шаблона --}}
    @yield('content')

    {{-- Инициализация всплывающих служебных сообщений --}}
    <script>
        $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip();
        });
    </script>
</body>
</html>

我尝试过使用官方 Bootstrap 文档，但找不到方法。

Answer 1

Электронная почта @错误（'电子邮件'） {{$消息}} @结束错误帕罗丽 @错误（'密码'） {{$消息}} @结束错误

如何在 Bootstrap 网格中正确放置对象

问题描述投票：0回答：1

1个回答

最新问题

如何在 Bootstrap 网格中正确放置对象

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1