부트 스트랩 열을 동일한 높이로 확장 할 수 없습니다.

Question

처음에는이 질문을 여러 번 물어 봤고 찾은 모든 해결책을 시도했습니다. 그래서 다시 물어 보는거야.

내가 작업하고있는 부트 스트랩 그리드는 최대 너비가 1000px입니다. 이 크기에서 세 개의 기둥은 완전히 동일한 높이입니다. 문제는 화면이 작아지고 서로 다른 수의 문자로 나뉘어져 있고 동일한 높이로 확장되지 않는 경우입니다.

지금까지 어떤 시도를 했습니까? 전시 : 테이블; 플렉스 박스; row-eq-height; matchheight.js.

Codepen : https://codepen.io/anon/pen/qPQjjp 브라우저 창 크기를 조정하면 창 크기에 따라 한 열이 다른 열보다 크게 표시됩니다.

<div class="feature1"> 
     <div class="col-sm-4"><div class="col-sm-12 well feature1-box">Text goes here</div></div> 
     <div class="col-sm-4"><div class="col-sm-12 well feature1-box">Text goes here</div></div> 
     <div class="col-sm-4"><div class="col-sm-12 well feature1-box">Text goes here</div></div> 
     </div> 

여분의 열 "COL-SM-12"

내가 세 가지 주요 기둥 사이의 흰색 공간을 제공하기 위해 여기에 배운 트릭이다.

CSS

.feature1 { 
    margin-left: auto; 
    margin-right: auto; 
    left: 0; 
    right: 0; 
    max-width: 1000px; 
} 

Answer 1

adobe.com에 Dreamwaver 포럼에서 사람이 나를 도왔다. 이것은 말 그대로 문자 그대로 유일한 해결책입니다. 내 경우

, 즉, CSS 사용해야합니까입니다 :

.feature1 { 

display: flex; 

flex-wrap: wrap; 

margin-left: auto; 

margin-right: auto; 

max-width: 1000px; 

} 

.col-sm-4 { 

display: flex; 

} 

.well { 

flex: 1; 

} 

.well h3 { 

text-align: center; 

} 

.well figure { 

text-align: center; 

}