Я не могу использовать свойства Toggle и свернуть в Bootstrap. ⇐ CSS

[Anonymous]

Проблема: я не могу использовать свойства переключения и свертывания при создании клона YouTube.
Что я пробовал:
Я сделал контейнер div с классом жидкости контейнера, и внутри этого класса я взял контейнер div класса строки, и эта строка div содержит три столбца, первый столбец - это div с коллапсом класса и размером col-3, который является красной секцией, а второй столбец - div с размером col-1, который представляет собой синюю часть, и третий столбец это div с размером col-auto, который представляет собой зеленую часть. И я разместил кнопку переключения на панели навигации над этим контейнером.
Чего я ожидал:

• Изначально когда я переключаю кнопку, в контейнере строк должны отображаться два столбца: синий раздел с размером столбца 1 и зеленый раздел с пробелом столбца 11 (авто).
• И всякий раз, когда я переключаю кнопку меню, сворачивается контейнер с размером col-3, который Красный раздел должен располагаться поверх синего раздела, закрывая его, а зеленый раздел необходимо настроить в соответствии с размером красного раздела, который имеет значение col-9 (авто).

Что я получаю:
Вместо того, чтобы переопределять синий раздел, раздел свертывания (красный раздел) занимает пространство в строка: Красная секция (столбец-3), Синяя секция (столбец-1), Зеленая секция (столбец-8). автоматически.

Код: Выделить всё

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

Код: Выделить всё

[i][/i]


[i][/i]
YouTube



[i]
[/i]



[i][/i]




[i] Create[/i]



[i][/i]



[i][/i]







column1

column3

Подробнее здесь: https://stackoverflow.com/questions/793 ... -bootstrap