html - Bootstrap 文本区域下的未对齐标签

Question

我有一个 Bootstrap 表单，它由基本输入字段和一些文本区域组成。我使用 Django 进行表单验证，并且一直存在在文本区域下对齐验证标签的问题。此表单仅使用 bootstrap css 模块，因此据我所知，没有自定义 css 干扰它。

示例:日期和时间字段完美对齐，而注释验证标签却没有。

<div class="row">
    <div class="col-md-8 col-md-offset-2">
        <div class="well well-lg">
            <form class="form-horizontal" action="" autocomplete="off" method="post">
                {% csrf_token %}      
                {% for field in UserForm %}     
                  <div class="form-group">  
                    <label class="col-md-4 control-label" for="{{ field.label }}"> {{ field.label }}</label>
                        <div class="col-md-6">                                            
                             {{ field }}
                        </div>     
                         {% for error in field.errors %}
                                <div class="col-md-6">  
                                    <strong>{{ error|escape }}</strong>                                    
                                </div>            
                         {% endfor %}
                  </div>       
                {% endfor %} 
                </form>
            </div>
        </div>
    </div>

Answer 1

class="row" 中的列数加起来不等于 12 .尝试像这样重写 form-group 部分:

<div class="form-group">  
  <label class="col-md-4 control-label" for="{{ field.label }}"> {{ field.label }}</label>
  <div class="col-md-6">
    {{ field }}
    {% for error in field.errors %}
    <p>
      <strong>{{ error|escape }}</strong>
    </p>
  {% endfor %}
  </div>
</div>