부트 스트랩 다중 열 양식 유효성 검사 시각적 버그

Question

부트 스트랩 및 angularjs를 사용하여 양식을 만들고 유효성을 검사합니다. 내 등록 양식에서 뷰포트가 충분히 큰 경우 여러 열을 사용하고 싶습니다. 유효하지 않은 데이터는 여러 열에서 주어진다면

col-md -> 여러 열
col-xs -> 단일 열 양식

사실, 도움말 블록은 이상한 행동을 보여 큰 흰색 영역을 만들 수 있습니다.

plnkr을 참조하십시오.

어떻게 시각적 버그를 수정할 수 있습니까?

Answer 1

나는 이것이 당신이 원하는 것이라고 믿습니다.

I는 다음과 같이 두 개의 컨테이너 생성 :

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

를 상기 제 1 용기와 제 2 용기에 두 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"> 

: 또한, 나는이 사업부에서 클래스 "COL-MD-6"를 제거! 결과는 다음과 같습니다. plnkr