Wie auf der linken Spalte Feste und rechts scrollbare in der Bootstrap-4, reaktionsschnell Weg?
Ich bin mit Winkel 4, Bootstrap 4 und zu versuchen, eine Feste scrollbaren rechten div-Element und einem festen Links div. Es sollte sehr ähnlich, was Trulia hat.
Bootstrap fiel das Affix jQuery-plugin in der version 4 so ist diese Methode nicht mehr gültig, Sie empfehlen die Verwendung von position: sticky, aber ich kann nicht ankommen es zu wirken.
Bitte um Hilfe!!
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>
Stil.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;
}
InformationsquelleAutor Isak La Fleur | 2017-05-20
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich bin mir nicht sicher, ob Sie wollen einfach ein layout mit 1 Feste Seite, oder der Seite fixiert werden, bis es erreicht die Fußzeile (wie Trulia). Hier ein einfaches layout mit fester linke Seite (Split 50 50).
https://www.codeply.com/go/IuOp3nvCpy
Machen die Seite fest (oder klebrig), nur an einem bestimmten Punkt
position:sticky
nicht sehr gut funktionieren in allen Browsern. Ich würde ein plugin oder polyfill, wie hier beschrieben: Wie verwenden von CSS position klebrig zu halten, eine Seitenleiste sichtbar mit Bootstrap 4Update Bootstrap 4.0.0 - Die
fixed-top
Klasse ist jetzt in der Bootstrap, die verwendet werden können auf der linken Spalte zu entfernen, die gegen css-das war erforderlich fürposition:fixed
.Update Bootstrap 4.1 - Die
h-100
- Klasse ist nun verfügbar, wodurch keine extra CSS -, die nötig war, fürheight:100%
: https://www.codeply.com/go/ySC2l4xcEiReaktionsschnell Weg - Wie bereits erwähnt in den Kommentaren, ein media-query kann verwendet werden, um die layout-responsive: https://www.codeply.com/go/pqzJB4thBY
Related:
Feste col auf der rechten Seite
So erstellen Sie eine Feste Seitenleiste layout mit Bootstrap 4?
Verwenden Sie die grid-Klassen für die Spalten und eine Medien-Abfrage, um nur behoben, bei größeren breiten wie dieses: codeply.com/go/pqzJB4thBY
das klappte! Danke!!!
InformationsquelleAutor Zim