Bootstrap可忽略警报

Question

我的django项目中有一个表单，我希望在用户点击提交时显示表单错误。这是我的一个领域（在我转向其他人之前努力做到一个）

<div class="form-group">
    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="title">Title
    </label>

    <div class="col-md-6 col-sm-6 col-xs-12">
        {{ form.title }}
    </div>
    <div class="col-md-3 .col-md-offset-3">
{#                                        <p class="text-danger">{% for error in form.title.errors %}{{ error }}{% endfor %}</p>#}
        <div class="alert alert-warning alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <p>{% for error in form.title.errros %} {{ error }} {% endfor %}</p>
        </div>
</div>

但是我有两个问题：

1. 加载表单时会显示警报，但不显示错误消息：



1. 当我解除警报时，表单样式变得混乱：



我似乎无法理解问题所在。

我能够使用此代码在没有引导程序警报的情况下收到错误消息。但是，在进行更正后让用户解除警报会很棒：

<div class="form-group">
    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="title">Title
    </label>

    <div class="col-md-6 col-sm-6 col-xs-12">
    {{ form.title }}
    </div>
    <span class="help-block">
        <p class="text-danger">{% for error in form.title.errors %}{{ error }}{% endfor %}</p>
    </span>
</div>

Answer 1

包含警报的<div>没有关闭</div>标记，当您解除警报时会混淆表单。至于表单加载时显示的提示 - 警报div中已经有一些内容（“关闭”按钮），因此会显示该提示。您必须有条件地呈现它（仅当有相应的错误显示时）：

    <div class="col-md-3 .col-md-offset-3">
        {% if form.title.errors %}
            <div class="alert alert-warning alert-dismissible" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <p>{% for error in form.title.errors %} {{ error }} {% endfor %}</p>
            </div>
        {% endif %}
    </div>