Bootstrap multi column form validation visual bug

Question

Я использую bootstrap и angularjs для создания своих форм и проверки их. В моей регистрационной форме я хочу использовать несколько столбцов, если окно просмотра достаточно велико.

col-md -> Несколько столбцов
col-xs -> единой формы колонки

На самом деле, если недостоверные данные приведены в нескольких колонках, помощь блоки показывают странное поведение и создать большую белую область.

См. plnkr.

Как можно устранить эту визуальную ошибку?

Answer 1

Я считаю, что это то, что вам нужно.

Я создал два контейнера следующим образом:

<div class="col-md-6"></div> 

и переместил «Электронная почта» и «Фамилия» в первом контейнере и двух других дивы на втором контейнере. Кроме того, я удалил класс "Col-мкр-6" из этих DIV:

исходный код

<div ng-class="{'has-error': form.email.$invalid && form.email.$dirty}" class="form-group col-md-6"> 

новый код

<div ng-class="{'has-error': form.email.$invalid && form.email.$dirty}" class="form-group"> 

Вот так! Вот результат: plnkr