web-dev-qa-db-de.com

Erstellen einer festen Seitenleiste neben einem zentrierten Bootstrap 3 Gitter

Ich möchte eine feste Seitenleiste erstellen, die existiert außerhalb my centered Bootstrap Grid. Die Herausforderung, der ich mich gegenübersetze, wenn ich dies versuche, besteht darin, zu bestimmen, welche zusätzlichen Stile angewendet werden sollen/Überschreibe meinen .container, damit er meine Seitenleiste nicht überlappt, wenn die Größe des Bildschirms geändert wird.

Für den Anfang benutze ich nur den Grid-Teil des CSS-Frameworks, so dass der .container, .row Und .col-md-12 Code ist, der aus der bootstrap.css - Datei selbst gezogen wurde und ist nicht Brauch. Denken Sie auch daran, dass ich Bootstrap verwende, also bitte keine Vorschläge für eine flüssige Gitterlösung für Bootstrap 2, nach der in früheren Threads oft gefragt wird.

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-nav {
  background: #2b2b2b;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 250px;
}
68
Carl Edwards

Wie drew_w sagte , finden Sie hier ein gutes Beispiel .

[~ # ~] 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;
    }

}

JSFIDDLE

111
eggy