부트 스트랩이있는 행에서 레이블을 줄 바꿈하여 양식 컨트롤의 세로 맞춤

Question

입력 필드 위의 레이블이있는 행에 입력 요소가 있습니다. 화면 폭이 좁혀 때 여러 단어로 구성된 긴 라벨은 전체 행보다 높은 만들기, 다음 행으로 워프 아래로 입력 요소를 이동 :

텍스트의 배치가 잘 될 것이다, 하지만 래핑 레이블이없는 다른 입력을 아래로 이동 한 입력에 맞춰야 할 것입니다.

어떻게하면됩니까?

<div class="row"> 
    <div class="col-md-4 form-group"> 
     <div ><label>Short Label</label></div> 
     <div ><input class="form-control" ></div> 

    </div> 

    <div class="col-md-4 form-group"> 
     <div ><label>This label is too long</label></div> 
     <div ><input class="form-control" ></div> 

    </div> 

    <div class="col-md-4 form-group"> 
     <div ><label>Another label</label></div> 
     <div ><input class="form-control" ></div> 
    </div> 
</div> 

Answer 1

에 클래스 col-md-4를 대체 할 수있다 : 나는

이

내 코드는 ... 생략 부호를 사용하는 것보다 다른 해결책을 찾기 위해 싶습니다 수업 ( Alignment)

<div class="row align-items-end"> 
    <div class="col-md-4 form-group"> 
     <div ><label>Short Label</label></div> 
     <div ><input class="form-control" ></div> 

    </div> 

    <div class="col-md-4 form-group"> 
     <div ><label>This label is too long</label></div> 
     <div ><input class="form-control" ></div> 

    </div> 

    <div class="col-md-4 form-group"> 
     <div ><label>Another label</label></div> 
     <div ><input class="form-control" ></div> 
    </div> 
</div> 

Answer 2

당신은 당신은 새로운 align-items-end을 사용할 수 있습니다 col

<div class="row"> 
    <div class="col form-group"> 
     <div ><label>Short Label</label></div> 
     <div ><input class="form-control" ></div> 
    </div> 
    <div class="col form-group"> 
     <div ><label>This label is too long</label></div> 
     <div ><input class="form-control" ></div> 
    </div> 
    <div class="col form-group"> 
     <div ><label>Another label</label></div> 
     <div ><input class="form-control" ></div> 
    </div> 
</div>