Bootstrap barre latérale avec la couleur d'arrière-plan
J'ai une mise en page simple en utilisant bootstrap qui me donne 2 colonnes - un GAUCHE et un DROIT. À l'aide de la grille de 12 colonnes format de Bootstrap - la gauche doit être de 8 de large et de la colonne de droite 4 large comme ci-dessous.
<div class="row">
<div class="col-md-8">Left Content</div>
<div class="col-md-4">Right Content</div>
</div>
Le problème? Comment puis-je ajouter un CONTENEUR à la ligne pour que les choses sont centrées, MAIS donner de la colonne de droite une couleur d'arrière-plan qui s'étend tout le chemin vers le bord du navigateur. Donc, si la gauche couleur d'arrière-plan est bleu et fond à droite est rose, les couleurs exécuter toute la largeur, tout en gardant un contenu centré via le conteneur.
- Merci de poster un violon ou d'une capture d'écran. Je n'ai pas vraiment compris ta question.
- venez d'ajouter image de référence à la question d'origine
Vous devez vous connecter pour publier un commentaire.
Vous pouvez l'essayer, ça fonctionne pour moi, vous devez ajouter une classe css.
et CSS comme ci-dessous
Je suis surpris, je n'ai trouvé que quelques questions comme celle-ci. J'ai eu une demande similaire et j'ai réussi à le résoudre à l'aide d'une combinaison d'éléments en position absolue et vw unités.
Fondamentalement, une enveloppe de l'élément a de la couleur de fond du côté gauche pour la faire ressembler il s'étend de la frontière de l'écran et d'un absolu placé div avec la même largeur de la fenêtre d'affichage s'étend à l'arrière-plan de la partie droite.
Vous pouvez le voir travailler dans cette codepen
Balisage va comme ceci
Et css:
Note que bg va s'accrocher à l'extérieur du récipient, vous aurez besoin de la
wrapper
div ou l'un de ses parents pour avoir sonoverflow-x
propriétéhidden
, sinon les barres de défilement horizontale apparaît.Si vous avez quelques éléments spécifiques à l'intérieur de votre colonne de droite, vous pouvez même utiliser les css pseudo-éléments comme
:before
pour éviter la déclaration de labg
élément.Aussi, vous devez définir l'écran approprié des points d'arrêt à ce style pour les petites tailles d'écran.
overflow-x
commehidden
, j'ai mis à jour le codepen.vous pouvez essayer cela et vous pouvez le modifier comme vous le souhaitez, pas besoin de plus de css.
Démo ici
<div class="_100">
<div class="container col-md-8 nopadding" style="background-color:blue;">
<div class="col-md-8 right nopadding" style="background-color:blue;border:white 1px solid;margin:5px">Left Content</div>
</div>
<div class="container col-md-4 nopadding" style="background-color:pink;">
<div class="col-md-6 nopadding" style="background-color:pink;border:white 1px solid;margin:5px">Right Content</div>
</div>
</div>
css:
Vous avez obtenu d'obtenir assez spécifique avec votre largeurs, qui sera capricieux au point d'arrêt, mais cela fonctionne comme un point de départ:
DÉMO: http://www.bootply.com/F9PCGnQr6Y
Vous aurez certainement besoin d'écrire un personnalisé du comportement à votre point d'arrêt(s), et souhaitez peut-être également à l'intérieur des récipients à col-7 et le col-5 depuis le premier col-8 finit par être très large à l'intérieur, mais ces personnalisations sont à vous...
De vérifier ma solution. Je suppose que vous avez besoin de ce one - codepen
Mais vous devez inclure bootstrap 4 au lieu de bootstrap 3
CSS:
HTML:
Voici la solution. Les blocs sont adaptatifs, vous pouvez définir n'importe quelle hauteur pour les deux blocs, la hauteur est automatiquement défini en fonction du contenu. codepen