我的目标是创建一个小的图片库，但是当我使用CSS使用width: 15px缩小图像的大小时，列之间的空间保持不变，使图像非常分散，而不是使容器更小
.gallery-dog-img {
max-height: 100%;
max-width: 100%;
cursor: pointer;
width: 50px;
padding-left:0;
padding-right:0;
}
.gallery{
padding: 3px 3px;
margin: 5px 5px;
}
.dog-cell {
padding-right:0;
padding-left:0;
}<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<section class="gallery bg-primary">
<div class="container-lg dog-gallery-container">
<div class="row align-items-center dog-images-row row-cols-1 row-cols-sm-2 row-cols-md-3">
<div class="col d-flex justify-content-center dog-cell">
<img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
</div>
<div class="col dog-cell">
<img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
</div>
<div class="col dog-cell">
<img class= "gallery-dog-img" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
</div>
<div class="col dog-cell">
<img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
</div>
<div class="col dog-cell">
<img class= "gallery-dog-img rounded-3" src="{% static '/images/home_dog_carousel/dog4.jpeg' %}" alt="">
</div>
<div class="col dog-cell">
<img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
</div>
<div class="col dog-cell">
<img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
</div>
</div>
</div>
</section>是否有办法使容器更小，以更好地适应较小的尺寸或从图像的原始尺寸中删除填充?
在Bootstrap中添加与布局相关的额外CSS时，这种情况经常发生． 主要是因为Bootstrap已经预先写好了，如果添加更多，我们会比其他任何东西都更干扰它。
我认为你应该尝试Bootstrapgutter(下面的链接)。
g-1被添加到第一行，但您可以使用g-0到g-5
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-1">
<div class="col">
<img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
</div>
<div class="col">
<img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
</div>
</div>
排水沟——比;https://getbootstrap.com/docs/5.0/layout/gutters/
据我所知，您希望保持图片较小，并减少列之间的间隙，以显示网格状图案。
bootstrap容器可以很好地处理响应式图像，根据单元格大小缩放它们。因为你不希望你的图像缩放，你必须减少容器的宽度，例如，通过选择fit-content或其他大小，而不是原来的100%。要做到这一点，您必须通过在CSS更改中添加!important来覆盖原始的bootstrap CSS。只是要小心使用!important，因为如果您忘记了覆盖的部分，它会变得相当混乱。
要处理列和行之间的间隙，您可以轻松使用BS沟槽类，例如g-3。
.gallery{
padding: 3px 3px;
margin: 5px 5px;
}
.dog-gallery-container{
width: fit-content !important;
}
.dog-cell {
padding-right:0 !important;
padding-left:0 !important;
}
.gallery-dog-img {
max-height: 100%;
max-width: 100%;
cursor: pointer;
width: 50px;
padding-left:0;
padding-right:0;
}<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<section class="gallery bg-primary">
<div class="container dog-gallery-container">
<div class="row align-items-center dog-images-row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<div class="col d-flex justify-content-center dog-cell">
<img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
</div>
<div class="col d-flex justify-content-center dog-cell">
<img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
</div>
<div class="col d-flex justify-content-center dog-cell">
<img class= "gallery-dog-img" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
</div>
<div class="col d-flex justify-content-center dog-cell">
<img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
</div>
<div class="col d-flex justify-content-center dog-cell">
<img class= "gallery-dog-img rounded-3" src="{% static '/images/home_dog_carousel/dog4.jpeg' %}" alt="">
</div>
<div class="col d-flex justify-content-center dog-cell">
<img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
</div>
<div class="col d-flex justify-content-center dog-cell">
<img class= "gallery-dog-img rounded-3" src="https://source.unsplash.com/collection/190728/1500x900" alt="">
</div>
</div>
</div>
</section>