Через Bootstrap 4 и HTML 5 я пытаюсь сделать столбец Bootstrap разборным, с хорошим переходом, одним нажатием кнопки. Я использую описанный здесь компонент свертки Bootstrap: https://getbootstrap.com/docs/4.0/components/collapse/.
По умолчанию это сворачивает мой столбец div по вертикали. Чтобы добиться горизонтального перехода к коллапсу, я добавил CSS.
. Мне удалось воссоздать проблему с помощью следующего фрагмента:
.collapse {
visibility: hidden;
}
.collapse.show {
visibility: visible;
display: block;
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition-property: height, visibility;
transition-property: height, visibility;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
.collapsing.width {-webkit-transition-property: width, visibility;
transition-property: width, visibility;
width: 0;
height: auto;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<div class="container-fluid p-0">
<div class="row no-gutters">
<div id="left-column" class="col-2 p-0 m-0 collapse show width">
<div style="Background: #6d7fcc;">
This should transition
</div>
</div>
<div class="col-10">
<a href='#' data-toggle="collapse" data-target="#left-column">
Click here to transition
</a>
</div>
</div>
</div>
Выше элемент скрыт; однако, нет никакого перехода вообще. После многих разочаровывающих минут я обнаружил, что могу осуществить свою мечту о горизонтальном переходе, удалив класс "col-2" из левого столбца, где div свернут, как показано здесь:
.collapse {
visibility: hidden;
}
.collapse.show {
visibility: visible;
display: block;
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition-property: height, visibility;
transition-property: height, visibility;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
.collapsing.width {-webkit-transition-property: width, visibility;
transition-property: width, visibility;
width: 0;
height: auto;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<div class="container-fluid p-0">
<div class="row no-gutters">
<div id="left-column" class="p-0 m-0 collapse show width">
<div style="Background: #6d7fcc;">
This should transition
</div>
</div>
<div class="col-10">
<a href='#' data-toggle="collapse" data-target="#left-column">
Click here to transition
</a>
</div>
</div>
</div>
В чем причина этого? Как мне реализовать этот горизонтальный переход, сохраняя при этом верность системе bootstrap сетки?