如何實現在更短的

Question

的引導文檔響應卡列給出了這樣使卡列在SASS響應：

.card-columns { 
    @include media-breakpoint-only(lg) { 
    column-count: 4; 
    } 
    @include media-breakpoint-only(xl) { 
    column-count: 5; 
    } 
} 

然而，我在我的網站有引導4的LESS版本。

如何編寫上述語法較少？

Answer 1

這是我想出了：

@media (min-width: 544px) { 
    .card-columns { 
    column-count: 2; 
    column-gap: 1.25rem; } 
    .card-columns .card { 
     display: inline-block; 
     width: 100%; } } 

@media (min-width: 768px) and (max-width: 991px) { 
    .card-columns { 
    column-count: 3; } } 

@media (min-width: 992px) and (max-width: 1199px) { 
    .card-columns { 
    column-count: 4; } } 

@media (min-width: 1200px) { 
    .card-columns { 
    column-count: 5; } }