Очень плохо знаком с HTML, CSS и Bootstrap.Возникли проблемы с тем, чтобы свернуть, чтобы работать правильно.
Я включил GIF моей проблемы.Я использую бутстрап, и при попытке использовать коллапс на теге H4 он работает неправильно.Не уверен, что я делаю не так.Любая помощь будет оценена.
GIF
Вот мой код.
.jumbotron {
background-color: #2E2D88;
color: white;
}
/* Adds borders for tabs */
.tab-content {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 10px;
}
.nav-tabs {
margin-bottom: 0;
}
<html lang='en'>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap Tutorial</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-1 col-md-3 col-sm-6 col-xs-12">
<h4>Column 1</h4>
<p>Lorem ipsum</p>
</div>
<div class="col-lg-1 col-md-3 col-sm-6 col-xs-12">
<h4>Column 2</h4>
<p>Lorem ipsum</p>
</div>
<div class="col-lg-1 col-md-3 col-sm-6 col-xs-12">
<h4>Column 3</h4>
<p>Lorem ipsum</p>
</div>
<div class="col-lg-1 col-md-3 col-sm-6 col-xs-12">
<h4>Column 4</h4>
<p>Lorem ipsum</p>
</div>
</div>
<div class="row">
<div class="col-lg-1 col-md-3 col-sm-6 col-xs-12">
<h4><a href="#col1content" data-toggle="collapse">Column 1</a></h4>
<div id="col1content" class="collapse">Text lorem ipsum.</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>