Création d'une barre latérale fixe à côté d'une grille Bootstrap 3 centrée

Question

Je voudrais créer une barre latérale fixe qui existe à l'extérieur de ma grille Bootstrap centrée. Le défi auquel je suis confronté en essayant de faire cela est de déterminer quels styles supplémentaires appliquer/supprimer à mon '.container' afin qu'il ne chevauche pas ma barre latérale lorsque l'écran est redimensionné. Pour commencer, je n'utilise que la partie grille du cadre css, donc le '.container', '.row' et '.col-md-12' est un code tiré du fichier 'bootstrap.css' lui-même et n'est pas personnalisé. Gardez également à l'esprit que j'utilise Bootstrap 3 Alors s'il vous plaît, pas de suggestions pour une solution de grille fluide pour Bootstrap 2 qui est souvent demandée dans les fils de discussion précédents.

HTML

<div id="left-nav"></div>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
               <p>Lorem ipsum dolor sit amet, nunc dictum at.</p>
            </div>
        </div>
    </div>

CSS

html, body {

height: 100%;
width: 100%;

}

#left-nave {

background: #2b2b2b;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 250px;

}

Answer 1

Comme l'a dit Drew_w vous pouvez trouver un bon exemple ici .

HTML

<div id="wrapper">
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li class="sidebar-brand"><a href="#">Home</a></li>
            <li><a href="#">Another link</a></li>
            <li><a href="#">Next link</a></li>
            <li><a href="#">Last link</a></li>
        </ul>
    </div>
    <div id="page-content-wrapper">
        <div class="page-content">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <!-- content of page -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

#wrapper {
  padding-left: 250px;
  transition: all 0.4s ease 0s;
}

#sidebar-wrapper {
  margin-left: -250px;
  left: 250px;
  width: 250px;
  background: #000;
  position: fixed;
  height: 100%;
  overflow-y: auto;
  z-index: 1000;
  transition: all 0.4s ease 0s;
}

#page-content-wrapper {
  width: 100%;
}

.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width:767px) {

    #wrapper {
      padding-left: 0;
    }

    #sidebar-wrapper {
      left: 0;
    }

    #wrapper.active {
      position: relative;
      left: 250px;
    }

    #wrapper.active #sidebar-wrapper {
      left: 250px;
      width: 250px;
      transition: all 0.4s ease 0s;
    }

}

Answer 2

Il existe un moyen simple de créer une barre latérale fixe. Dans cet exemple, la version 2.3.2 de bootstrap est utilisée.

<div class="row-fluid">
    <div class="span3">
       <div class="span3" style='position:fixed;'>
            <!-- sidebar of page -->
       </div>
       <div class='span9'>
                <!-- content of page -->
       </div>
</div>