Twitter Bootstrap peut-il être utilisé pour créer une mise en page à deux colonnes avec une barre latérale à largeur fixe et une zone de contenu principale à largeur fluide ?

Création d'une mise en page à 2 colonnes (fixe - fluide) avec Twitter Bootstrap

Dans cet article, nous verrons s'il est possible de obtenez une mise en page à deux colonnes avec une barre latérale de largeur fixe et une zone de contenu principale de largeur fluide à l'aide de Twitter Bootstrap. Nous vous fournirons des explications et des solutions complètes pour guider votre développement.

Est-ce possible avec Twitter Bootstrap ?

Twitter Bootstrap incluait initialement une option de mise en page fluide fixe via le Classe ".conteneur-fluide". Cependant, avec la sortie de la version 2.0, cette fonctionnalité a été supprimée. Par conséquent, il n'est pas possible d'implémenter une disposition à fluide fixe uniquement en utilisant les classes Bootstrap standard.

Solution

1. Mise en page à fluide fixe

Nous pouvons implémenter une mise en page à fluide fixe en utilisant une combinaison de HTML modifié et CSS :

HTML :

<div>

CSS :

.fixed {
    width: 150px;
    float: left;
}

.fixed + div {
     margin-left: 150px;
     overflow: hidden;
}

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
    position: relative;
}

.filler::after{
    background-color:inherit;
    bottom: 0;
    content: "";
    height: auto;
    min-height: 100%;
    left: 0;
    margin:inherit;
    right: 0;
    position: absolute;
    top: 0;
    width: inherit;
    z-index: -1;  
}

2. Hauteurs de colonnes égales (facultatif)

Pour obtenir des hauteurs égales pour la barre latérale et la zone de contenu :

HTML :

<div>

Remarques :

• Pour faire de la barre latérale l'élément de remplissage, remplacez « droite : 0 » par « gauche : 0 » dans le CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!