Ich kann die Toggle- und Collapse-Eigenschaften im Bootstrap nicht verwenden ⇐ CSS

[Guest]

Problem: Ich kann die Umschalt- und Minimierungseigenschaft beim Erstellen eines YouTube-Klons nicht verwenden.
Was ich versucht habe:
Ich habe eine genommen div-Container mit einer Container-Fluid-Klasse und innerhalb dieser Klasse habe ich einen div-Container der Zeilenklasse genommen und diese div-Zeile enthält drei Spalten, die erste Spalte ist div mit Klassenkollaps und Spalte-3-Größe, was der rote Abschnitt ist, und die zweite Spalte ist div mit der Größe von Spalte 1, die der blaue Abschnitt ist, und die dritte Spalte ist div mit col-auto-Größe, die ein grüner Abschnitt ist. Und ich habe den Umschaltknopf in der Navigationsleiste über diesem Container platziert.
Was ich erwartet habe:

• Anfangs Wenn ich die Schaltfläche umschalte, sollte der Zeilencontainer zwei Spalten anzeigen, nämlich einen blauen Abschnitt mit der Größe Spalte 1 und einen grünen Abschnitt mit Leerzeichen Spalte 11 (automatisch).
• Und wann immer ich meine Menüschaltfläche umschalte, wird der Container mit der Größe minimiert Spalte 3, der rote Abschnitt, sollte über dem blauen Abschnitt liegen und ihn abdecken, und der grüne Abschnitt muss an die Größe des roten Abschnitts angepasst werden, der Spalte 9 ist (automatisch).

Was ich bekomme:
Anstatt den blauen Abschnitt zu überschreiben, wird der reduzierte Abschnitt (roter Abschnitt) belegt Geben Sie den Platz in der Zeile als roten Abschnitt (Spalte 3), blauen Abschnitt (Spalte 1) und grünen Abschnitt ein (col-8) automatisch.

Code: Select all

col {
padding: 1rem;
background-color: blue;
color: white;
border: 2px solid black;
}

Code: Select all

[i][/i]


[i][/i]
YouTube



[i]
[/i]



[i][/i]




[i] Create[/i]



[i][/i]



[i][/i]







column1

column3