web-dev-qa-db-fra.com

Comment créer une disposition de barre latérale fixe avec Bootstrap 4?

enter image description here

J'essaie de créer une présentation similaire à celle de la capture d'écran en utilisant Bootstrap 4), mais je rencontre des problèmes pour corriger la barre latérale et obtenir cette présentation 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 disposition, mais les choses se compliquent une fois que je déclare:

.sidebar {
position: fixed // or absolute
}

Une fois que je fais coller la barre latérale, le main div commence à apparaître derrière la barre latérale au lieu de le faire à côté. Bien sûr, il est possible de déclarer une marge et de la repousser à sa position initiale, mais cela complique les choses pour la réactivité.

J'ai l'impression de manquer quelque chose. J'ai lu la documentation de Bootstrap 4) mais je ne trouvais pas de moyen simple de réaliser cette présentation.

htmlcsstwitter-bootstrapbootstrap-4
31
cinnaroll45

Mise à jour 2018

Voici une réponse mise à jour pour le dernier Bootstrap 4.0.0 . Cette version a des classes qui vous aideront à créer une barre latérale fixe collante ou sans le CSS supplémentaire ....

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:
Colonne fixe et déroulante dans Bootstrap 4 flexbox
position fixe du col Bootstrap
Comment utiliser la position CSS pour garder une barre latérale visible avec Bootstrap 4
Créez un "tiroir" de barre latérale de barre de navigation sensible dans Bootstrap 4?

47
Zim

quelque chose comme ça?

#sticky-sidebar {
position:fixed;
max-width: 20%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div class="col-xs-12" id="sticky-sidebar">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </div>
    </div>
    <div class="col-xs-8" id="main">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </div>
</div
6
GvM

J'utilise le J.S. pour fixer un menu de la barre latérale. J'ai essayé beaucoup de solutions avec CSS, mais c'est le moyen le plus simple de le résoudre, ajoutez simplement J.S. ajouter et supprimer un fichier natif BootStrap: "position-fixed").

Le J.S .:

var lateral = false;
function fixar() {

            var element, name, arr;
            element = document.getElementById("minhasidebar");

            if (lateral) {
                element.className = element.className.replace(
                        /\bposition-fixed\b/g, "");
                lateral = false;
            } else {

                name = "position-fixed";
                arr = element.className.split(" ");
                if (arr.indexOf(name) == -1) {
                    element.className += " " + name;
                }
                lateral = true;
            }

        }

Le HTML:

Sidebar:

<aside>
        <nav class="sidebar ">
             <div id="minhasidebar">
                 <ul class="nav nav-pills">
                     <li class="nav-item"><a class="nav-link active" 
                     th:href="@{/hoje/inicial}"> <i class="oi oi-clipboard"></i> 
                     <span>Hoje</span>
                     </a></li>
                 </ul>
             </div>
        </nav>            
</aside>
0
Michel Fernandes