So erstellen Sie eine Feste Seitenleiste layout mit Bootstrap 4?

So erstellen Sie eine Feste Seitenleiste layout mit Bootstrap 4?

Ich versuche ein layout erstellen, wie der screenshot mit Bootstrap 4, aber ich habe einige Probleme mit der sidebar behoben und die Erreichung dieses layout an der gleichen Zeit.

Geht mit einem einfachen Beispiel:

<div class="container">
  <div class="row">
    <div class="col-m-4" id="sticky-sidebar">
      Sidebar
    </div>
    <div class="col-m-8" id="main">
      Main Area
    </div>
  </div>
</div

Ist es möglich, dieses layout aber die Dinge schwierig werden, einmal erkläre ich:

.sidebar {
position: fixed //or absolute
}

Mach ich mal das sticky-sidebar, die main div beginnt, die hinter der Seitenleiste anstatt daneben. Natürlich ist es möglich zu erklären, einige Rand und schieben Sie es zurück zu seiner ursprünglichen position, aber es macht die Dinge kompliziert für die Reaktionsfähigkeit.

Ich fühle mich wie ich bin etwas fehlt, lese ich die Bootstrap-4-Dokumentation, aber ich konnte nicht finden eine einfache Möglichkeit, dies zu erreichen-layout.

InformationsquelleAutor cinnaroll45 | 2016-11-08

  1. 22

    Aktualisiert 2018

    Hier ist eine aktualisierte Antwort auf die neuesten Bootstrap 4.0.0. Diese version enthält Klassen, die Ihnen helfen, erstellen Sie eine sticky oder Feste Seitenleiste ohne extra CSS....

    Verwenden sticky-top:

    <div class="container">
    <div class="row py-3">
        <div class="col-3 order-2" id="sticky-sidebar">
            <div class="sticky-top">
                ...
            </div>
        </div>
        <div class="col" id="main">
            <h1>Main Area</h1>
            ...   
        </div>
    </div>
</div>

    Demo: https://www.codeply.com/go/O9GMYBer4l

    oder, verwenden Sie position-fixed:

    <div class="container-fluid">
    <div class="row">
        <div class="col-3 px-1 bg-dark position-fixed" id="sticky-sidebar">
            ...
        </div>
        <div class="col offset-3" id="main">
            <h1>Main Area</h1>
            ...
        </div>
    </div>
</div>

    Siehe auch:

    Feste und scrollbare Spalte in der Bootstrap-4 flexbox

    Bootstrap-col fixed position

    Wie verwenden von CSS position klebrig zu halten, eine Seitenleiste sichtbar mit Bootstrap 4

    Erstellen Sie eine responsive navbar, sidebar "Schublade" in der Bootstrap-4?

    schöne Lösung, aber wir müssen warten, für voll-Unterstützung 'sticky' im Browser

    InformationsquelleAutor Zim

  2. -2

    Meine version:

    div#dashmain { margin-left:150px; }
div#dashside {position:fixed; width:150px; height:100%; }
    <div id="dashside"></div>
<div id="dashmain">                        
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">Content</div>
        </div>            
    </div>        
</div>

    InformationsquelleAutor Szurdoki Gábor

Schreibe einen Kommentar