Comment obtenir 15 colonnes dans Bootstrap 4 dans SASS CSS?

Question

J'ai un design de mise en page clairement conçu pour 1200px/15 cols framework, mais mon client veut utiliser Bootstrap 4 avec SASS seulement. Est-il même possible de transformer Bootstrap en 15 cols? Je n'ai pas vu un tel exemple en ligne. Je ne suis pas un grand fan de Bootstrap pour les petits projets. C'est une tendance que je ne comprends honnêtement pas. Peut-être trop lourd pour un site Web de 5 pages & les projets sont généralement réalisés en fonction du contenu, non pas selon un certain cadre, soutenu par Twitter ou non.

Mais, c'est ça.

S'il était possible de coder une mise en page de 15 cols, pourriez-vous me donner un indice sur la façon de commencer? Et combien de temps faudrait-il pour effectuer une telle adaptation?

Answer 1

Vous pouvez simplement recompiler bootstrap 4 avec les paramètres appropriés.

La documentation à: https://v4-alpha.getbootstrap.com/layout/grid/#customizing-the-grid devrait l'expliquer, mais puisqu'il s'agit d'un lien temporaire, je vais l'inclure ici. D'abord, vous devriez pouvoir construire le SASS en CSS, mais dans l'ensemble, vous devez simplement définir la variable pour combien de colonnes avant d'inclure le fichier bootstrap à construire, ou modifier le fichier variable.scss et changer la valeur de $ valeur grille-colonnes comme ceci:

$grid-columns:    15; 

qui est le point de départ, vous pouvez avoir à régler d'autres variables de grille pour contrôler la largeur totale et gouttière entre chaque colonne, etc.

Answer 2

vous avez juste besoin de changer la variable $ grid-columns en utilisant SASS.

$grid-columns: 15;

Vous pouvez également vérifier d'autres variables comme $grid-gutter-width pour diminuer l'espacement entre les colonnes puisque vous utilisez plusieurs colonnes.

Working Demo