这里还有一个关于Bootstrap 4的问题。
我想触摸两个图像对着对方，并占用整个宽度的页面。 我试过容器-流体和IMG-流体，因为我认为这将占屏幕宽度的100%，然后把它们放在2个Col-6的。 不幸的是，那没有奏效。
这里有一个我想要的可视化示例+我当前拥有的代码:Image
<div class="container-fluid">
<div class="row ">
<div class="col-md-6 col-12">
<img class="img-fluid" src="https://images.pexels.com/photos/2187605/pexels-photo-2187605.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260">
</div>
<div class="col-md-6 col-12">
<img class="img-fluid" src="https://images.pexels.com/photos/2187605/pexels-photo-2187605.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260">
</div>
</div>
</div>
您可以使用引导程序的p-0来执行此操作，它将删除容器流体上的填充，并将在宽度和屏幕上显示图像。
您不需要执行任何自定义CSS来执行此操作。
运行下面的代码段。
null
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="container-fluid p-0">
<div class="row ">
<div class="col-md-6 col-12">
<img class="img-fluid" src="https://images.pexels.com/photos/2187605/pexels-photo-2187605.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260">
</div>
<div class="col-md-6 col-12">
<img class="img-fluid" src="https://images.pexels.com/photos/2187605/pexels-photo-2187605.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260">
</div>
</div>
</div>