Wie erstellt man eine kollabierbare Sidebar mit dem Bootstrap von Twitter?

9

Ich habe versucht, eine Sidebar zu erstellen, die mit dem Bootstrap-Projekt von Twitter erweitert und reduziert wird, aber ich kann es nicht funktionieren. Ich versuche, ihr grundlegendes Container-Fluid-Layout als Ausgangspunkt zu verwenden. Ich kann die Seitenleiste nicht richtig ausblenden und den "Inhalt" -Bereich auf die gesamte Breite des Bildschirms erweitern. Stattdessen wird der Text der Seitenleiste ausgeblendet, aber der Inhaltsbereich wird nicht erweitert. Ich habe die Breite der Seitenleiste und des Inhalts geändert, aber ich kann es nicht ändern. Danke für jede Hilfe mit diesem.

Ich habe auch hier gesucht

    
Tree 02.11.2011, 17:38
quelle

2 Antworten

5

Dies ist leicht zu erreichen ... Bitte beachten Sie die folgende Fiddle ..

Das ist aber der Kern davon ... Grundsätzlich wird die Sidebar nach einer Sekunde Inaktivität mit der Maus ausgeblendet. Sie tauschen die content (hat Seitenleiste) und container-fluid (keine Seitenleiste) für Ihren Hauptblock aus und blenden die Seitenleiste aus. Einfach so.

%Vor%     
Alex Gray 12.01.2012 12:10
quelle
0

Das Problem mit den Layouts in Bootstrap ist, dass sie nicht flüssig sind - wenn Sie eine ihrer Klassen für das Layout verwenden, sind sie feste Werte (sehen Sie in der bootstrap.css nach). Nun, das heißt, ihre Container-Fluid-Klasse ist flüssig - irgendwie. Es hat eine minimale Breite von 940px, und wenn es mit der Sidebar-Klasse verwendet wird, hat es einen Rand von 240px. Aus diesem Grund kollabiert Ihre Sidebar nicht.

Sie können entweder die Bootstrap-CSS ändern (was den Zweck widerlegt, IMO) oder ein benutzerdefiniertes Stylesheet erstellen oder Inline-Styles verwenden, die die Bootstrap-Klassen außer Kraft setzen, und diese Klassen Ihren Anforderungen anpassen, ohne dabei Kompromisse einzugehen Bootstrap CSS direkt (wodurch es einfach zu aktualisieren).

    
Joyrex 22.12.2011 18:01
quelle

Tags und Links