Création d'une barre latérale fixe à côté d'une grille de Bootstrap 3 centrée
j'aimerais créer une barre latérale fixe qui existe à l'extérieur de ma grille de Bootstrap centrée. Le défi auquel je fais face en essayant de le faire est de déterminer quels styles supplémentaires appliquer/écraser à mon .container de sorte qu'il ne chevauche pas ma barre latérale lorsque l'écran est redimensionné.
pour commencer j'utilise seulement la partie de la grille du cadre css donc le .container , .row et .col-md-12 est un code tiré du bootstrap.css fichier lui-même et n'est pas coutume. Gardez également à l'esprit que j'utilise Bootstrap 3 , donc s'il vous plaît, pas de suggestions pour une solution de réseau fluide pour Bootstrap 2 qui est souvent demandé dans les fils précédents.
<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-nav {
background: #2b2b2b;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 250px;
}
1 réponses
comme drew_w a dit , 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: #CCC;
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;
}
}