Dans cette exemple, je vais forcer la sidebar sur une taille de 300px. Bootstrap 4 ajoute un padding de 15px à gauche et à droite, la taille total de la barre latérale est donc de 330px (300 + 15 + 15).
Pour la sidebar, il suffit donc juste de forcer la taille via css :
max-width: 330px; min-width: 300px;
pour le contenu, il va donc falloir calculer la taille en live. Bootstrap 4 dimension les colones en pourcentage. Un simple cacl fera donc l'affaire.
calc(100% - 330px)
Structure HTML
<body class="sidebar-prymary"> <div class="content"> <main>Contenu du site</main> <aside class="sidebar">Barre latérale</aside> </div> </body>
Code SCSS
$main-sm-columns: 12;
$sidebar-sm-columns: 4;
.main {
@include make-col-ready;
@include media-breakpoint-up(md) {
@include make-col($main-sm-columns);
.sidebar-primary & {
width: calc(100% - 330px);
max-width: calc(100% - 330px) !important;
@include make-col($main-sm-columns - $sidebar-sm-columns);
}
}
}
.sidebar {
@include make-col-ready;
@include media-breakpoint-up(md) {
@include make-col($sidebar-sm-columns);
min-width: 330px;
max-width: 330px;
}
}
.sidebar-primary {
.content {
@include make-row;
}
}
Voilà, j'obtiens donc une colonne de contenu dont la taille s'adapte automatiquement pour conserver une barre latérale de taille fixe. Pour les petits écrans (inférieur à md), on revient au fonctionnement classique de Boostrap 4 grâce aux medias queries media-breakpoint-up. J'ai conservé la gestion des grids de bootstrap pour des cas particuliers et pouvoir jouer avec les colones en fonction des appareils.
Cette barre latérale de taille fixe peut s'avérer utile pour intégrer des éléments non responsive comme des publicités (le bon vieux MPU), ou des plugins de réseaux sociaux (facebook like box, etc ...)