并排引导垂直网格

Question

我发现很难解释我想做什么，但希望它有意义。我正在创建两个引导程序网格来容纳正在扩展的文本框。喜欢下面的屏幕截图；

我正在努力实现

然而，我使用的代码如下所示；

右侧的盒子掉落会导致左侧掉落，即使它们在单独的行中

我的代码在下面。

<div class="container">
<div class="row">
<div class="col col-lg-6">
<div class="row">
<div class="col-lg-12"></div>
<div class="col-lg-12"></div>
</div>
</div>
<div class="col col-lg-6">
<div class="row">
<div class="col-lg-12"></div>
<div class="col-lg-12"></div>
</div>
</div>
</div>

我应该如何使其正确工作？

Answer 1

这应该是你想要的

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<!-- left column -->
<div class="col-lg-6">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Item #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne">
<div class="card-body">
Text 
</div>
</div>
</div>
<div class="card mt-3">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Item #3
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree">
<div class="card-body">
Text 
</div>
</div>
</div>
</div>
<!-- right column -->
<div class="col-lg-6">
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Item #2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo">
<div class="card-body">
Text
</div>
</div>
</div>
<div class="card mt-3">
<div class="card-header" id="headingFour">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Collapsible Item #4
</button>
</h5>
</div>
<div id="collapseFour" class="collapse" aria-labelledby="headingFour">
<div class="card-body">
Text
</div>
</div>
</div>
</div>
</div>
</div>