admin管理员组

文章数量:1389754

Trying to figure out how to eliminate those background containers. Here is my code. I tried removing all the containers and cards but it still didn't eliminate it. I've looked in my base.html and it does not have any cards or containers. all it has is the nav bar. I've tried using p-0 but that just shifted everything to the left.

{% extends "users/base.html" %}
{% block title %} Register as Customer {% endblock title %}
{% block content %}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <h4 class="text-center">Create Customer Account</h4>
            <form method="POST" enctype="multipart/form-data">
                {% csrf_token %}
                {% if form.errors %}
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <div id="form_errors">
                            {% for key, value in form.errors.items %}
                                <strong>{{ value }}</strong>
                            {% endfor %}
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                {% endif %}
                <div class="form-row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="small mb-1"><i class="fas fa-user"></i> First Name</label>
                            {{ form.first_name }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="small mb-1"><i class="fas fa-user"></i> Last Name</label>
                            {{ form.last_name }}
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="small mb-1"><i class="fas fa-user"></i> Username</label>
                            {{ form.username }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="small mb-1"><i class="fas fa-envelope"></i> Email</label>
                            {{ form.email }}
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="small mb-1"><i class="fas fa-lock"></i> Password</label>
                            {{ form.password1 }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="small mb-1"><i class="fas fa-lock"></i> Confirm Password</label>
                            {{ form.password2 }}
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="small mb-1"><i class="fas fa-phone"></i> Phone Number</label>
                            {{ form.phone_number }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="small mb-1"><i class="fas fa-map-marker-alt"></i> Address</label>
                            {{ form.address }}
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="small mb-1"><i class="fas fa-city"></i> City</label>
                            {{ form.city }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="small mb-1"><i class="fas fa-flag"></i> State</label>
                            {{ form.state }}
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="small mb-1"><i class="fas fa-mail-bulk"></i> Zip</label>
                            {{ form.zip }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="small mb-1"><i class="fas fa-birthday-cake"></i> Birthday</label>
                            {{ form.birthday }}
                        </div>
                    </div>
                </div>
                <div class="form-group mt-4 mb-0">
                    <button type="submit" class="btn btn-primary col-md-12">Sign Up</button>
                </div>
            </form>
            <div class="text-center mt-3">
                <div class="small">
                    <a href="{% url 'login' %}">Have an account? Go to Sign in</a>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
function formatBirthdayInput(event) {
    const input = event.target;
    let value = input.value.replace(/\D/g, ''); // Remove all non-digit characters
    if (value.length > 2) {
        value = value.slice(0, 2) + '/' + value.slice(2);
    }
    if (value.length > 5) {
        value = value.slice(0, 5) + '/' + value.slice(5);
    }
    input.value = value;
}
</script>
{% endblock content %}

This is the base.html

{% load static %}
<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- CSS stylesheet-->
    <link rel="stylesheet" href="{% static 'css/styles.css' %}">
    <!-- Favicon -->
    <link rel="icon" href="{% static 'favicon.ico' %}" type="image/x-icon">
    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="/[email protected]/dist/leaflet.css" />
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="/[email protected]/dist/leaflet.js"></script>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/[email protected]/dist/css/bootstrap.min.css">

    <!-- Font Awesome CSS -->
    <link rel="stylesheet" href=".15.3/css/all.min.css">

    <title>{% block title %}My Site{% endblock title %}</title>
</head>

<body>
    <nav class="navbar navbar-horizontal">
        <ul class="navbar-nav d-flex flex-row">
            <li class="nav-item {% if request.path == '/' %}active{% endif %}">
                <a class="nav-link" href="{% url 'home' %}">Home</a>
            </li>
            {% if user.is_authenticated %}
                <li class="nav-item {% if request.path == '/logout_confirm/' %}active{% endif %}">
                    <a class="nav-link" href="{% url 'logout_confirm' %}">Logout</a>
                </li>
                <li class="nav-item {% if request.path == '/messages/' %}active{% endif %}">
                    <a class="nav-link" href="{% url 'messages' %}">Messages</a>
                </li>
                <li class="nav-item {% if request.path == '/profile/' %}active{% endif %}">
                    <a class="nav-link" href="{% url 'profile' %}">Profile</a>
                </li>
                {% if user.is_customer %}
                    <li class="nav-item {% if request.path == '/create_job/' %}active{% endif %}">
                        <a class="nav-link" href="{% url 'create_job' %}">Create Job</a>
                    </li>
                {% endif %}
                
            {% else %}
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'login' %}">Sign In</a>
                </li>
                <li class="nav-item {% if request.path == '/register/' %}active{% endif %}">
                    <a class="nav-link" href="{% url 'register_decision' %}">Sign up</a>
                </li>
            {% endif %}
        </ul>
    </nav>
    <div class="container">
        {% if messages %}
            <div class="alert alert-dismissible fade show" role="alert">
                {% for message in messages %}
                    <div class="alert alert-{{ message.tags }}">{{ message }}</div>
                {% endfor %}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endif %}
        {% block content %}{% endblock content %}
    </div>
    
    <!-- Add these elements to your HTML where appropriate -->
    <div id="debug-info" style="display: none;">
        <pre id="debug-content"></pre>
    </div>

    <script src=".6.0.min.js"></script>
    <script src="/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
    <script src="/[email protected]/dist/js/bootstrap.min.js"></script>
    {% block scripts %}{% endblock scripts %}
</body>
</html>

Any help would be appreciated

Here is a picture to highlight what I'm talking about. the background shows 2 containers.

本文标签： pythonbootstrap 533 how to remove the background containersStack Overflow

版权声明：本文标题：python - bootstrap 5.3.3 how to remove the background containers? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744677074a2619177.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。