부트 스트랩 열과 가변 높이 단락

Question

부트 스트랩 3.3.7을 사용하고 고해상도, 2 열 (col-sm-6) 또는 3 열 (col-sm-6) 또는 3 열 (col-md- 1 열 (col-xs-12). 세 개 또는 두 개의 열이 있는지 여부에 관계없이 동일한 높이에 가까운 열을 생성하는 레이아웃으로 끝내고 싶습니다. 단락 소스가 정적이 아니기 때문에 유연한 레이아웃을 만들려고합니다.

<p class="col-md-4 col-sm-6 col-xs-12">...</p> 

을하지만, 단락이 변수 높이가 있기 때문에, 정말 내가 기대 방법을 작동하지 않았다 :

나는 시도했다. 부트 스트랩 만 사용하여 공백을 남기지 않고 공간이있는 곳이면 어디서나 단락을 전달할 수있는 방법이 있습니까? Sass와 함께 어때요?

Answer 1

CSS 미디어 쿼리를 사용하고 부트 스트랩 클래스를 제거하여이를 해결했습니다.

/* Extra small */ 
@media (min-width: 480px) { 
    .faqs { 
    -webkit-column-count: 1; 
    -moz-column-count: 1; 
    column-count: 1; 
    } 
} 

/* Small */ 
@media (min-width: 768px) { 
    .faqs { 
    -webkit-column-count: 2; 
    -moz-column-count: 2; 
    column-count: 2; 
    } 
} 

/* Medium */ 
@media (min-width: 992px) { 
    .faqs { 
    -webkit-column-count: 3; 
    -moz-column-count: 3; 
    column-count: 3; 
    } 
} 

/* Large */ 
@media (min-width: 1200px) { 
    .faqs { 
    -webkit-column-count: 4; 
    -moz-column-count: 4; 
    column-count: 4; 
    } 
} 

article { 
    break-inside: avoid-column; // keep articles together 
}