gpt4 book ai didi

html - Bootstrap 居中容器在页面中间

转载 作者:行者123 更新时间:2023-12-02 16:08:58 27 4
gpt4 key购买 nike

<分区>

我是前端的新手,正在通过构建一个虚假的电子商务网站来练习。我遇到了一些问题,但遇到了一个我不确定解决这些问题的最佳方法的问题。我希望我的表单位于页面中间。它之所以复杂,是因为我遇到了一个问题,即由于页面本身缺乏内容,我的视口(viewport)太大,页脚下有一个巨大的空白。我解决这个问题的方法只是简单地将表单本身的 View 高度设置为 85%,因此我不确定如何在页面上水平居中我的表单。解决此问题的最佳方法是什么?任何帮助是极大的赞赏!附上截图和代码 example

代码如下:

{% extends 'base.html' %}
{% load static %}

{% block css_files %}
<link rel="stylesheet" href="{% static 'login-out.css' %}">
{% endblock %}

{% block content %}
<div class="container-fluid" id='loginout'>
<div class="container-fluid text-center pt-3">
{% if next %}
{% if user.is_authenticated %}
<p>Your account doesn't have access to this page. To proceed,
please login with an account that has access.</p>
{% else %}
<p><strong> Please login to see this page.</strong></p>
{% endif %}
{% endif %}
</div>

<section id="form-test">
<div class="container w-25 py-3" id='login-wrapper'>
<form method="post" action="{% url 'login' %}">
{% csrf_token %}
<div class="form-group">
{{ form.username.label_tag }}
{{ form.username }}
{{ form.password.label_tag }}
{{ form.password }}
{{ form.non_field_errors }}
</div>
<input class='btn btn-outline-primary' type="submit" value="Login" />
<input type="hidden" name="next" value="{{ next }}" />
</form>

{# Assumes setup the password_reset view in URLconf #}
<p><a href="{% url 'password_reset' %}">Lost password?</a></p>
</div>
</section>
</div>
{% endblock %}

和CSS

#loginout {
background: #fef8f5;
height: 85vh;
}

#container-text-center-pt-3 a {
text-decoration: none !important;
}

#wrapper {
background: #fef8f5;
height: 100vh;
}

.form-control:focus {
border-color: #d66534;
box-shadow: 0 0 0 0.2rem rgb(230, 77, 11, 0.25);
}

#login-wrapper {
background-color: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com