我创建了如下列表组：
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>test</title>
<!--bootstrap scripts-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--end bootsripts-->
</head>
<body>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#s">Default</button>
<div class="modal" tabindex="-1" role="dialog" id="s">
<div class="modal-dialog modal-lg modal-dialog-scrollable" >
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="col-6 col-sm-6 col-xl-6">
<h5 class="text-danger">Main Catagories</h5>
<div class="list-group"style="width:100px;border:none">
<a href="#vehical" class="list-group-item list-group-flush border-bottom" data-toggle="collapse" style="text-decoration:none">Vehical</a>
<a href="#property" class="list-group-item list-group-flush border-bottom" data-toggle="collapse" style="text-decoration:none">Property</a>
</div>
</div>
<div class="col-6">
<div class="list-group list-group-flush" style="width:100px;border:none" >
<div class="list-group collapsing" id="vehical" data-toggle="collapse" style="width:100px;border:none" >
<a href="#" class="list-group-item list-group-item-action">Vehical1</a>
<a href="#" class="list-group-item list-group-item-action">Vehical2</a>
<a href="#" class="list-group-item list-group-item-action">Vehical3</a>
<a href="#" class="list-group-item list-group-item-action">Vehical4</a>
<a href="#" class="list-group-item list-group-item-action">Vehical5</a>
</div>
<div class="list-group collapsing" id="property" data-toggle="collapse" style="width:100px;border:none">
<a href="#" class="list-group-item list-group-item-action">Property1</a>
<a href="#" class="list-group-item list-group-item-action">Property2</a>
<a href="#" class="list-group-item list-group-item-action">Property3</a>
<a href="#" class="list-group-item list-group-item-action">Property4</a>
<a href="#" class="list-group-item list-group-item-action">Property5</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Java Scripts-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<!--end of java scripts-->
</body>
</html>当点击主类别时，子类别将显示在下一列。但它显示为在此处输入图像描述
当我点击新的主类别按钮时，它会在右侧面板中显示与主类别相关的子类别。此后，当点击另一个主类别按钮后，两个子类别都会显示在右侧面板上，但我只想显示与点击主类别有关的子类别项目。我使用引导程序4版本
回答晚了，但我认为这对其他面临同样问题的人会有所帮助。实际上，您缺少了在列表组上进行选项卡切换所需的一些属性。查看下面的代码片段以获得想法。
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>test</title>
<!--bootstrap scripts-->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<!--end bootsripts-->
</head>
<body>
<button
type="button"
class="btn btn-default"
data-toggle="modal"
data-target="#s"
>
Default
</button>
<div class="modal" tabindex="-1" role="dialog" id="s">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="col-4 col-sm-4 col-xl-4">
<h5 class="text-danger">Main Catagories</h5>
<div class="list-group" style="width: 100px; border: none">
<a
class="list-group-item list-group-item-action active"
id="list-vehicle-list"
data-toggle="list"
href="#list-vehicle"
role="tab"
aria-controls="vehicle"
>Vehicle</a
>
<a
class="list-group-item list-group-item-action"
id="list-property-list"
data-toggle="list"
href="#list-property"
role="tab"
aria-controls="property"
>Property</a
>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div
class="tab-pane fade show active"
id="list-vehicle"
role="tabpanel"
aria-labelledby="list-vehicle-list"
>
<a href="#" class="list-group-item list-group-item-action"
>Vehical1</a
>
<a href="#" class="list-group-item list-group-item-action"
>Vehical2</a
>
<a href="#" class="list-group-item list-group-item-action"
>Vehical3</a
>
<a href="#" class="list-group-item list-group-item-action"
>Vehical4</a
>
<a href="#" class="list-group-item list-group-item-action"
>Vehical5</a
>
</div>
<div
class="tab-pane fade"
id="list-property"
role="tabpanel"
aria-labelledby="list-property-list"
>
<a href="#" class="list-group-item list-group-item-action"
>Property1</a
>
<a href="#" class="list-group-item list-group-item-action"
>Property2</a
>
<a href="#" class="list-group-item list-group-item-action"
>Property3</a
>
<a href="#" class="list-group-item list-group-item-action"
>Property4</a
>
<a href="#" class="list-group-item list-group-item-action"
>Property5</a
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Java Scripts-->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
crossorigin="anonymous"
></script>
<!--end of java scripts-->
</body>
</html>