Css ng重复,错误消息对齐

Css ng重复,错误消息对齐,css,angularjs-ng-repeat,Css,Angularjs Ng Repeat,我有一个ng repeat控件,有textbox、textarea和删除图像图标。我正在为textbox、textarea添加一个必需的验证器。显示span错误消息后,对齐将发生扭曲。 以下是使用的代码: <div class="row"> <div class="form-group "> <label class="form-group col-md-3">Language&l

我有一个ng repeat控件,有textbox、textarea和删除图像图标。我正在为textbox、textarea添加一个必需的验证器。显示span错误消息后,对齐将发生扭曲。 以下是使用的代码:

<div class="row">
                  <div class="form-group ">
                      <label class="form-group col-md-3">Language</label>
                      <label class="form-group col-md-4">Title</label>
                      <label class="form-group col-md-5">Description</label>
                  </div>
              </div>
              <div class="row">
                  <div>
                      <div ng-repeat="Descriptions in testsWithDescription ">
                          <div class="form-group col-md-2 top-Margin-language">
                              <label ng-model="Descriptions.Language">{{Descriptions.Language}}</label>
                          </div>
                          <div class="form-group col-md-4 top-Margin-Title">
                              <input type="text" maxlength="150" class="form-control input-md" required="" name="titleValidate_{{$index}}" ng-model="Descriptions.Title" />
                              <span style="color:red" ng-show="submitted == true && mainForm.titleValidate_{{$index}}.$error.required">Title is required</span> 
                          </div>

                          <div class="form-group col-md-5">
                              <textarea maxlength="500" class="form-control input-md noresize" required="" name="descriptionValidate_{{$index}}" noresize="" ng-model="Descriptions.Description"></textarea>
                              <span style="color:red" ng-show="submitted == true && mainForm.descriptionValidate_{{$index}}.$error.required">Description is required</span>
                          </div>

                          <div class="form-group col-md-1">
                              <a style="cursor:pointer">
                                  <img ng-src="{{DeleteIcon_url}}" alt="delete image" ng-click="($index == !selectedDeleteIcon) || testsWithDescription.splice($index,1)" ng-class="{'disabled': $first}" />
                              </a>

                          </div>
                      </div>
                  </div>
              </div>

语言
标题
描述
{{Descriptions.Language}}
标题是必需的
需要说明
使用ng repeat时,如何正确设置跨度的对齐方式?初始加载控制装置是否正确对齐。如果删除标题或说明中的任何项目,然后单击“提交”,则会显示错误消息,但用户界面会失真


谢谢@haxxxton提供的解决方案就是答案,它是:
您应该将ng repeat向上移动,因为这将提供引导列所需的“clearfix”,以便允许额外跨度的高度变化。ie

引导程序的
类包括“ing”。这允许不同高度列的行始终从左侧开始。当前,html正在使用
行中的嵌套
div
作为重复元素。如果将
ng repeat
向上移动到
class div,则ClearFixed将在每组列之后生效,并且外观应与预期一致

更新的HTML

<div class="row">
    <div class="form-group ">
        <label class="form-group col-md-3">Language</label>
        <label class="form-group col-md-4">Title</label>
        <label class="form-group col-md-5">Description</label>
    </div>
</div>
<div class="row" ng-repeat="Descriptions in testsWithDescription ">
    <div class="form-group col-md-2 top-Margin-language">
        <label ng-model="Descriptions.Language">{{Descriptions.Language}}</label>
    </div>
    <div class="form-group col-md-4 top-Margin-Title">
        <input type="text" maxlength="150" class="form-control input-md" required="" name="titleValidate_{{$index}}" ng-model="Descriptions.Title" />
        <span style="color:red" ng-show="submitted == true && mainForm.titleValidate_{{$index}}.$error.required">Title is required</span> 
    </div>
    <div class="form-group col-md-5">
        <textarea maxlength="500" class="form-control input-md noresize" required="" name="descriptionValidate_{{$index}}" noresize="" ng-model="Descriptions.Description"></textarea>
        <span style="color:red" ng-show="submitted == true && mainForm.descriptionValidate_{{$index}}.$error.required">Description is required</span>
    </div>
    <div class="form-group col-md-1">
        <a style="cursor:pointer">
        <img ng-src="{{DeleteIcon_url}}" alt="delete image" ng-click="($index == !selectedDeleteIcon) || testsWithDescription.splice($index,1)" ng-class="{'disabled': $first}" />
        </a>
    </div>
</div>

语言
标题
描述
{{Descriptions.Language}}
标题是必需的
需要说明

你能给我们提供一个剪子或小提琴吗,这样我们就可以看到实际发生的情况了?你应该把你的
ng repeat
移动到你的
上,因为这将提供引导柱需要的“clearfix”,以便允许额外跨度的高度变化。ie
嗨,我已经提供了屏幕片段。嗨@haxxxton。您的解决方案解决了问题请管理员将此问题设置为已回答,由@haxxxton提供的解决方案已解决此问题。目前我没有得到任何图标来标记问题的答案。我已将该评论标记为有用。