Source doc officielle : Disabling responsiveness.
Méthode #3
Pas encore testée : idée au-réveil-ce-matin…
Conserver l’ensemble des classes .col-xs-, .col-sm, .col-md, .col-lg
dans la CSS mais supprimer les media-queries. Attention : si le site comporte des composants responsive hors grille, il faudra également vérifier la présence de media-queries au niveau des styles qui servent à les afficher.
Pour résumer : vos CSS doivent être exemptes de toute media-querie.
Méthode #2 :
Achtung! Après un test rapide, n’a pas l’air de fonctionner mais je n’ai peut-être pas tout bien fait comme il fallait … A re-tester éventuellement.
Source : How to remove responsive features in Twitter Bootstrap 3?
Utiliser l’éditeur en ligne Customize and download pour générer une grille non responsive.
Sous Media queries breakpoints entrer les paramètres suivants :
Attention : ne pas inclure les responsive utilities dans vos styles osus peine de voir s’appliquer les classes de type .hidden-xs ou .visible-xs.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// Media queries breakpoints // -------------------------------------------------- // Extra small screen / phone // Note: Deprecated @screen-xs and @screen-phone as of v3.0.1 @screen-xs: 1px; @screen-xs-min: @screen-xs; @screen-phone: @screen-xs-min; // Small screen / tablet // Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1 @screen-sm: 2px; @screen-sm-min: @screen-sm; @screen-tablet: @screen-sm-min; // Medium screen / desktop // Note: Deprecated @screen-md and @screen-desktop as of v3.0.1 @screen-md: 3px; @screen-md-min: @screen-md; @screen-desktop: @screen-md-min; // Large screen / wide desktop // Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1 @screen-lg: 9999px; @screen-lg-min: @screen-lg; @screen-lg-desktop: @screen-lg-min; |
Test #1 :
Attention : solution expérimentale encore non-testée, mais sachant que je ne trouvais pas de solution à ma convenance sur le net…
Ne fonctionne pas.
Cette astuce consiste à conserver l’ensemble des classes responsive dans votre code HTML (pas besoin de retirer la succession de classes col-xs-12 col-sm-6 col-md-6 col-lg-4
).
Avec quelques lignes de CSS, vous pourriez donc très bien partir systématiquement de vos templates HTML conçues pour un affichage fluide sans les modifier pour obtenir un affichage figé Desktop.
Admettons que le breakpoint ciblé correspond aux classes préfixées par col-md-
(Medium devices : Desktops (≥992px) défini par défaut à 970px dans la grille Bootstrap.)
1 2 3 4 5 6 |
@media (min-width: 0px) and (max-width: 1170px) { .container{ max-width: none !important; width: 970px; } } |