如何在Bootstrap 5中的行左右添加图片以获取响应

Question

下面提到了我的代码，但它在bootstrap 3中。我想在页面的左侧和右侧各放两张图片，如下图所示。我如何在它们之间留出空间，使其响应

我想要的那一行的图片

引导程序中的代码如下所示。

<div class="container-fluid">
<div class="row opacity">

<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12  Opa">                        
<img src="./img/cr-logo.png" class="img-responsive">
</div>

<div class="col-lg-7 col-md-7 col-sm-12 col-xs-12">                     

</div>


<div class="col-lg-1 col-md-1 col-sm-12 col-xs-12">
<div class="img">
<img src="./img/appointment.png" class="img-responsive">
</div>
</div>

</div>
</div>

Answer 1

这就足够了。不需要那些额外的div标签。顺便说一下，我建议使用Bootstrap 4或更高版本，我使用了Bootstrap 4。

• justify-content-between-它将显示具有空格的灵活项目

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="container-fluid">
<div class="row justify-content-between">
<img src="https://fakeimg.pl/200x100" class="">
<img src="https://fakeimg.pl/100" class="">
</div>
</div>