如何将 div 放置在另一个 div 下方

Question

所以我使用bootstraps网格系统，在顶行我有三个div，网格为3和6和3

左边的div(3( 用于链接，所以高度可能会不时变化，中间的div(6( 保持不变，而右边的div(3( 也可能不时变化。

我遇到的问题是，当我尝试在原始div(6( 下方添加另一个div (6( 时，它会保持在中心的另一个div(3( 下方。我似乎无法让它很好地位于这个div(6( 下方？

<div class="row justify-content-left">
<div class="col-md-3">
<div class="card">
<div class="card-header">Left</div>
<div class="card-body">
<p> Link </p>
<p> Link </p>
<p> Link </p>
<p> Link </p>
<p> Link </p>
<p> Link </p>
<p> Link </p>
<p> Link </p>
</div>
</div>     </div>

<div class="col-md-6">
<div class="card">
<div class="card-header">Center</div>
<div class="card-body">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Website URL" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Submit</button>
</div>
</div>
</div>
</div></div>

<div class="col-md-3">
<div class="card">
<div class="card-header">Right</div>
<div class="card-body">
<p> Link </p>
<p> Link </p>
<p> Link </p>
<p> Link </p>
<p> Link </p>
<p> Link </p>
<p> Link </p>
<p> Link </p>
</div>
</div>
</div>
</div>

<div class="row justify-content-center">
<div class="col-md-6">.
<div class="card">
<div class="card-header">Underneath Center</div>
<div class="card-body">
<p> Link </p>
<p> Link </p>
<p> Link </p>
<p> Link </p>
<p> Link </p>
<p> Link </p>
<p> Link </p>
<p> Link </p>
</div>
</div>    </div>
</div></div> ```

Answer 1

假设您使用的是 Bootstrap 4。

您可能需要更深入地指定您的用例，但您可以尝试将其他内容放在中心(.col-6(列中？

<div class="row justify-content-left">
<div class="col-md-3">
<div class="card">
<div class="card-header">Left</div>
<div class="card-body">
<p> Link </p>
<p> Link </p>
<p> Link </p>
<p> Link </p>
<p> Link </p>
<p> Link </p>
<p> Link </p>
<p> Link </p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">Center</div>
<div class="card-body">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Website URL" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Submit</button>
</div>
</div>
</div>
</div>
<div class="card mt-5">
<div class="card-header">More Content in Center</div>
<div class="card-body">
<p> Link </p>
<p> Link </p>
<p> Link </p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-header">Right</div>
<div class="card-body">
<p> Link </p>
<p> Link </p>
<p> Link </p>
<p> Link </p>
<p> Link </p>
<p> Link </p>
<p> Link </p>
<p> Link </p>
</div>
</div>
</div>
</div>