Python django表单中的大小响应字段_Python_Html_Css_Django_Responsive

Python django表单中的大小响应字段

python html css django

Python django表单中的大小响应字段,python,html,css,django,responsive,Python,Html,Css,Django,Responsive,我正在制作一个web应用程序，我想在表单中创建响应字段。当我在小窗口中访问我的站点时，我的所有表单文件都会伸出它们的容器边界。登录窗口中的html代码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login DomainManager</title

我正在制作一个web应用程序，我想在表单中创建响应字段。当我在小窗口中访问我的站点时，我的所有表单文件都会伸出它们的容器边界。登录窗口中的html代码示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Login  DomainManager</title>
            {% load static %}
            <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
            <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"> </script>
    </head>
    <body>
        <div class="center">
            <div class="panel panel-info" >
                <div class="panel-heading">
                    <center> <h3 class="panel-title">Login</h3> </center>
                </div>
                <div class="panel-body">
                    <form method="post" action="{%  url 'login' %}">
                        {% csrf_token %}
                            <p><b>Username: {{ form.username }}</b></p>
                            <p><b> Password: {{ form.password }}</b></p>
                            <center>
                                <p><input type="submit"  value="Login"></p>
                                <input type="hidden" name="next" value="{{ next }}">
                                <a href="/register" style="color: black">No account? Register</a>
                            </center>

                        {% if form.errors %}
                            <center>
                                <p style="color:#ff0000;">Your login or password is wrong!</p>
                                <p><a href="/accounts/password_reset/" style="color: black">Forgot password?</a></p>
                            </center>
                        {%  endif %}
                        {%  if next %}
                            <p>No access.</p>
                        {% endif %}
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>

<style>
    body {
        background-color:#f9f9f9;
    }
    .panel > .panel-heading {
        background-color: #222222;
        color: gray;
        text-align: center;
    }
    .panel-info {
        border-color: #222222;
    }
    .panel-body {
        padding-left: 10%;
        padding-right: 10%;
    }
    div.center {
        margin: 0;
        width: 15%;
        top: 30%;
        left: 50%;
        position: absolute;
        -ms-transform: translate(-50%, -30%);
        transform: translate(-50%, -30%);
    }
</style>


登录域管理器
{%load static%}
登录
{%csrf_令牌%}
用户名：{{form.Username}
密码：{form.Password}}

{%if form.errors%}
您的登录名或密码错误

{%endif%}
{%if next%}
无法进入
{%endif%}
身体{
背景色：#f9f9f9；
}
.panel>.panel标题{
背景色：#22222；
颜色：灰色；
文本对齐：居中；
}
.面板信息{
边框颜色：#2222222；
}
.小组委员会{
左：10%；
右：10%；
}
分区中心{
保证金：0；
宽度：15%；
最高：30%；
左：50%；
位置：绝对位置；
-ms转换：翻译（-50%，-30%）；
转换：翻译（-50%，-30%）；
}

我使用UserCreationForms，这是它在较小的WebBrowser窗口中的外观：

将字段放入

div

并将

行w-25

添加到div类将字段放入

div

并将

行w-25

添加到div类