Question

如何在不删除bootstrap template tags的情况下解决此问题？

上下文：

我有以下模板架构：

layout.html是我的基本模板

我还有另一个继承自layout.html

的模板

我正在使用第三方软件包应用程序django-bootstrap3

我的layout.html是：

（navbar和django变量模板的div数量无关紧要 - 只是为了演示）

{% load staticfiles %}
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
<html lang="es">
{% block head %}
<head>
    <title>{% block title_tag %}My APP{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'css/main.css' %}">
</head>
{% endblock %}
<body>
<div class="wrapper">
    <!-- Nav menu -->
    <header>
        {% if request.user.is_authenticated %}
            {% if userprofile %}
                <div class="profile-options">
                    {% comment %} Begin settings drowdown {% endcomment %}
                    <div class="name-options-cont">
                        <div class="name">
                            <p>{{ userprofile.user.email }} - {{ userprofile.user.enterprise_name }}</p>
                        </div>
                        <div class="options">
                            <div class="drop-down">
                                <ul>
                                    <li><a href="{% url 'some-url'  %}" >Some option</a></li>
                                    <li><a href="{% url 'some-url2'  %}" >Some option2</a></li>
                                    <li><a href="{% url 'accounts:logout' %}">Exit</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
            {% else %}
                <div class="registration">
                    <a href="{% url 'accounts:signup' %}">Registrarse</a><a href="{% url 'login' %}">Iniciar sesión</a>
                </div>
        {% endif %}
    </header>
    <div class="container">
        {% if messages %}
            {% for message in messages %}
            <div class='alert {% if "success" in message.tags %}alert-success{% elif "warning" in message.tags%}alert-
            warning{% elif "error" in message.tags %}alert-danger{% endif %} alert-dismissible' role='alert'>
                <!-- Boton para cerrar el alert-->
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                 <!--End Boton para cerrar el alert
                     Haciendo uso del Django messages framework-->
                    {% if "safe" in message.tags %}{{ message|safe }}{%else%}{{ message }}{% endif %}
            </div>
            {% endfor %}
        {% endif %}
    </div>
    {% block body_content %}
    {% endblock body_content %}
</div>
    <footer>
    </footer>
</body>
</html>

我的article_detail.html模板继承自layout.html。

在这个模板中，我正在Django中检索对象信息，并呈现文章的特定信息。

在layout.html 中，divs金额和django变量模板无关紧要 - 仅供演示

{% extends "layout.html" %}
{% load bootstrap3 %}
{% load staticfiles %}
{% block body_content %}

<!-- Right column -->
<div class="search-column">
    <div class="post-column">
        <div class="info">
            <div class="icon">
                <img src="{% static 'img/icons/info.svg' %}" alt="">
                <span>Información</span>
            </div>
            <div class="autor">
                <p class="title">Autor</p>
                <div class="profile">
                    <div class="img-cont">
                        <a href="#">
                            {% if instance.author.avatar%}
                        <img src="{{ instance.author.avatar.url }}" alt="">
                            {% else %}
                               <img src="{% static 'img/default_profile_pic.png' %}" class="img-responsive">
                            {% endif %}

                        </a>
                    </div>
                    <div class="name-review-cont">

                        {% comment %} A quien corresponda {% endcomment %}
                        <a href="#">
                            {% if instance.author.get_long_name %}
                            <span>{{ instance.author.get_long_name }}</span>
                            {% endif %}
                            {% if instance.author.get_enterprise_name %}
                            <span>{{ instance.author.get_enterprise_name }} (@{{ instance.author.email }})</span>
                            {% endif %}
                        </a>
                        <p><div class="fb-like" data-href="{{ request.build_absolute_uri }" data-layout="standard"
                                data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
                        </p>
                        <hr/>
                        {% comment %}
                        <img src="{% static 'img/stars.svg' %}" alt="">
                        <div class="average">
                            <span>546</span>
                            <span>valoraciones</span>
                        </div>
                        {% endcomment %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- End right column-->

<!-- Main content -->
<main>
    <div class="blog-body">
        {% if instance.image %}
        <img src="{{ instance.image.url }}" class="img-responsive">
        {% endif %}

        <div class="title-cont">
            <h1>{{ title }} <small>{% if instance.draft %}<span style='color: red'> Borrador</span> {% endif %}{{ instance.publish }}</small> </h1>
            {% comment %}
            {% if instance.author.has_perm %}
                {{ instance.author.has_perm }}
            {% endif %}
            {% endcomment %}
            {% comment %} <h1>{{ title }} <small>{{ instance.timestamp|timesince }}</small> </h1>{% endcomment %}
        </div>
        <div class="main-text">
            {{ instance.content|linebreaks }}<br/>
        </div>
    </div>
</main>
<!-- End main content -->
{% endblock %}

当我通过浏览器访问文章详细信息视图时，我发现了以下设计级别：

我一直在检查Inspect elements并且我认为（我不知道我是否正确）有一个<div class="container"> .. </div>元素在空白处覆盖此可视空间：

我认为，如果这个<div class="container"> .. </div>元素不是我的蓝色部分代码，它将被正确定位，而不是在页面下方。

这个<div class="container"> .. </div>元素是由我使用的django-bootstrap3带来的，如下图所示：

如果我转到上面提到的layout.html模板，我删除了以下模板标签bootstrap相关：

{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}

并在浏览器中刷新我的article_detail.html，视觉空间空白是固定的

引导容器的难度 - django-bootstrap3

0 个答案: