如何在目标列之间放置不同的边距宽度，而无需我的列开始新行?(我想总共保留 12 列)

Question

这是代码的JSFiddle链接。

我想在目标列之间放置不同的垂直边距宽度。 我已经尝试通过放置mr-4来在我的col-xs-4和col-lg-4之间留出余量

<div class="container-fluid">
<div class="row">
<div class="col-4 col-xs-4 col-lg-4 mr-4">Logo</div>
<div class="col-8 col-xs-8 col-lg-8">Titre</div>
</div>

但是该列在XS模式下不再适合，而在LG模式下，该列转到下一行。 我需要在响应式XS和LG中对此图像执行相同的操作：

移动(XS(

台式机(LG(

Answer 1

如此处所述 您可以给父项一个负边距mx-n*，给子项一个正填充px-*

例如

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row  mx-n2">
<div class="px-2  col-4 col-xs-4 col-lg-4">
<div class="p-3 border bg-light">Logo</div>
</div>
<div class="px-2  col-8 col-xs-8 col-lg-8">
<div class="p-3 border bg-light">Titre</div>
</div>
</div>
</div>

演示小提琴