Bootstrap SASS 5 столбцов сетка отзывчивого

Question

Я сделал дополнительную кол-х-пятой колонку шириной 20%:

.col-xl-5th { 
    @include make-xl-column(2.4) 
} 
.col-lg-5th{ 
    @include make-lg-column(2.4) 
} 
.col-md-5th{ 
    @include make-md-column(2.4) 
} 
.col-sm-5th{ 
    @include make-sm-column(2.4) 
} 
.col-xs-5th { 
    @include make-xs-column(2.4) 
} 

Довольно простая вещь. Моя проблема заключается в попытке сделать отзывчивый макет, используя это. Положив классы, как это на элементе:

col-xs-5th col-sm-4 col-md-3 col-lg-3 col-xl-2 

Причины седловине-XS-5-е, чтобы полностью переписать все на любой точки зрения (если я проверить его в хромированной инспекции кода, то хз видовой экран является первым приоритетом мудрый, правильный правильный после него). Я уверен, что это вызвано тем, что я импортирую файл sass после всего остального, однако, если я импортирую его перед сеткой, он просто проигнорируется, так как все остальное будет перезаписывать столбец col-xs-5 вместо этого.

Есть ли у кого-нибудь идеи, как я мог бы это достичь?

Answer 1

Что вы хотите сделать, это создать свои собственные контрольные точки и с помощью Bootstrap, это не так просто, как вы могли бы подумать с вашим примером. Для этого вам нужно будет использовать Bootstrap для правильного создания вещей. This article объясняет, как создать пользовательскую точку останова и проверить example GitHub repo.