Comment faire pour colonne de gauche fixe et à droite de défilement dans le Bootstrap 4, sensible?
Je suis en utilisant Angulaire 4, Bootstrap 4 et essaie de mettre en place un fixe à défilement à droite de la div et fixe gauche de la div. Il devrait très similaire à ce que Trulia a.
Bootstrap abandonné l'Affixe jQuery plugin dans la version 4, donc cette méthode n'est plus valable, ils recommandent d'utiliser la position: collant, mais je ne peux pas le faire fonctionner.
S'il vous plaît aider!
index.html
<div class="container-fluid">
<div class="row h-100">
<div class="col-md-6">
<div id="left-container">
<div class="search-property">
<input type="text">
</div>
</div>
</div>
<div class="col-md-6">
<div id="right-container">
<app-home-right></app-home-right>
</div>
</div>
</div>
</div>
style.css
#left-container {
height: 100%;
position: fixed;
width: inherit;
}
#right-container {
position: absolute;
}
.search-property {
position: relative;
top: 50%;
transform: perspective(1px) translateY(-50%);
margin-left: 50%;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.border {
border: 1px solid black;
}
OriginalL'auteur Isak La Fleur | 2017-05-20
Vous devez vous connecter pour publier un commentaire.
Je ne suis pas sûr si vous voulez simplement une mise en page avec 1 côté fixe, ou pour le côté pour être fixé jusqu'à ce qu'il atteigne le pied de page (comme Trulia). Voici une mise en page simple avec fixe latéral gauche (Split 50 50).
https://www.codeply.com/go/IuOp3nvCpy
À faire du côté fixe (ou collant) seulement à un moment précis,
position:sticky
ne fonctionne pas très bien sur tous les navigateurs. J'utilise un plugin ou un polyfill, comme expliqué ici: Comment utiliser CSS position collant à garder une barre latérale visible avec Bootstrap 4Mise à jour de Bootstrap 4.0.0 - Le
fixed-top
classe est maintenant dans le Bootstrap qui peut être utilisé sur le côté gauche de la colonne à supprimer les css qui a été nécessaire pourposition:fixed
.Mise à jour de Bootstrap 4.1 - Le
h-100
classe est maintenant disponible, ce qui élimine les extra CSS qui était nécessaire pourheight:100%
: https://www.codeply.com/go/ySC2l4xcEiSensible - Comme mentionné dans les commentaires, une requête de média peut être utilisé pour faire la mise en page responsive: https://www.codeply.com/go/pqzJB4thBY
Liés à:
fixe col sur le côté droit
Comment créer une barre latérale de mise en page avec Bootstrap 4?
Utiliser la grille de classes sur les colonnes et sur une requête de média pour n'appliquer le fixe dans les grandes largeurs comme ceci: codeply.com/go/pqzJB4thBY
qui a travaillé! Merci!!!!
OriginalL'auteur Zim