Comment créer une barre latérale de mise en page avec Bootstrap 4?

Comment créer une barre latérale de mise en page avec Bootstrap 4?

Je suis en train de créer une mise en page comme la capture d'écran à l'aide de Bootstrap 4, mais je vais avoir quelques problèmes avec la prise de la barre latérale fixe et la réalisation de cette mise en page en même temps.

Aller avec un exemple de base:

<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

Il est possible d'obtenir cette mise en page, mais les choses se complique une fois je déclare:

.sidebar {
position: fixed //or absolute
}

Une fois que j'ai la barre latérale collant, le principal div commence à apparaître derrière la barre latérale au lieu d'à côté. Bien sûr, il est possible de déclarer une certaine marge et le pousser à revenir à leur position d'origine, mais elle complique les choses pour la réactivité.

J'ai l'impression de manquer quelque chose, j'ai lu le Bootstrap 4 de la documentation, mais je ne pouvais pas trouver un moyen simple de réaliser cette mise en page.

OriginalL'auteur cinnaroll45 | 2016-11-08

  1. 25

    Mis à jour 2018

    Voici une mise à jour de réponse pour la dernière Bootstrap 4.0.0. Cette version a des classes qui vous aidera à créer une collant ou fixe la barre latérale sans le CSS....

    Utilisation 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>

    Démo: https://www.codeply.com/go/O9GMYBer4l

    ou, utilisez 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>

    Voir aussi:

    Fixe et défilement de la colonne dans le Bootstrap 4 flexbox

    Bootstrap col position fixe

    Comment utiliser CSS position collant à garder une barre latérale visible avec Bootstrap 4

    Créer un réactif barre de navigation sidebar "tiroir" dans le Bootstrap 4?

    belle solution, mais nous devons attendre pour soutenir pleinement "colle" dans les navigateurs

    OriginalL'auteur Zim

  2. -2

    Ma 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>

    OriginalL'auteur Szurdoki Gábor