css home.blade.php form login on left

eeq64g8w  于 4个月前  发布在  PHP
关注(0)|答案(3)|浏览(75)

主刀片中的登录表单仍然锚定在左侧,我需要将其放在页面的中心,您可以帮助我吗?整个完整视图位于存储库中
我尝试了网格和样式,但失败了,这是一个用于phpvms7的视图
感谢那些谁回答
这是代码和视图repository

@extends('app')
@section('title', __('home.welcome.title'))
@section('content')
  <div class="form">
    <h1>@lang('common.login')</h1>
    @if(Auth::check())
    {{-- Itera sugli utenti solo se l'utente è autenticato --}}
    @foreach($users as $user)
    <!-- Codice per visualizzare gli utenti autenticati -->
    @endforeach
    @else
    <div class="card">
      <div class="card-body">
        <form method="POST" action="{{ route('login') }}">
           <div class="form-group" style="max-width: 100%;">>
            <label for="email">@lang('common.email')</label>
            <input type="email" name="email" id="email" class="form-control" required>
          </div>
          <div class="form-group">
            <label for="password">@lang('Password')</label>
            <input type="password" name="password" id="password" class="form-control" required>
          </div>
          <button type="submit" class="btn btn-primary btn-block">@lang('common.login')</button>
        </form>
      </div>
    </div>
    @endif
  </div>
</div>
@endsection

字符串
page

w8biq8rn

w8biq8rn1#

尝试使用Bootstrap的实用程序类
因此,将此添加到您的主刀片布局的头部

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

字符串
你的代码应该看起来像这样:

@extends('app')
@section('title', __('home.welcome.title'))
@section('content')
  <div class="form d-flex justify-content-center align-items-center" style="height: 100vh;">
    <div class="card">
      <div class="card-body">
        <h1 class="text-center">@lang('common.login')</h1>
        @if(Auth::check())
          {{-- Itera sugli utenti solo se l'utente è autenticato --}}
          @foreach($users as $user)
            <!-- Codice per visualizzare gli utenti autenticati -->
          @endforeach
        @else
          <form method="POST" action="{{ route('login') }}">
            <div class="form-group">
              <label for="email">@lang('common.email')</label>
              <input type="email" name="email" id="email" class="form-control" required>
            </div>
            <div class="form-group">
              <label for="password">@lang('Password')</label>
              <input type="password" name="password" id="password" class="form-control" required>
            </div>
            <button type="submit" class="btn btn-primary btn-block">@lang('common.login')</button>
          </form>
        @endif
      </div>
    </div>
  </div>
@endsection

hsvhsicv

hsvhsicv2#

你可以使用flexbox将所有内容居中。只需将表单 Package 在一个容器中:
把这个css添加到你的stylsheet中:

.form-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Optional: Set a minimum height for centering vertically */
}

/* Add any additional styling for your form as needed */
.form {
  /* Your existing form styles */
}

字符串
下面是使用flexbox Package 器修改后的刀片模板代码:

@extends('app')
@section('title', __('home.welcome.title'))
@section('content')
<div class="form-wrapper">
  <div class="form">
    <h1>@lang('common.login')</h1>
    @if(Auth::check())
    {{-- Itera sugli utenti solo se l'utente è autenticato --}}
    @foreach($users as $user)
    <!-- Codice per visualizzare gli utenti autenticati -->
    @endforeach
    @else
    <div class="card">
      <div class="card-body">
        <form method="POST" action="{{ route('login') }}">
           <div class="form-group" style="max-width: 100%;">>
            <label for="email">@lang('common.email')</label>
            <input type="email" name="email" id="email" class="form-control" required>
          </div>
          <div class="form-group">
            <label for="password">@lang('Password')</label>
            <input type="password" name="password" id="password" class="form-control" required>
          </div>
          <button type="submit" class="btn btn-primary btn-block">@lang('common.login')</button>
        </form>
      </div>
    </div>
    @endif
  </div>
</div>
</div>
@endsection

z18hc3ub

z18hc3ub3#

我通过下载 Bootstrap 文件并在其中创建一个cardform来解决它,谢谢你的答案

相关问题