Html 为什么在图像网格之间会有随机空间？

在阅读了一些线程之后，我设法使用“flex”类删除了随机空格。但我什么都试过了，现在我厌倦了。我无法摆脱这些随机空间。有人能指出这里面出了什么问题吗

.jumbotron{
边缘顶部：80px；
左侧填充：40px；
背景#0d2d60；
颜色：白色；
}
.形象{
宽度：100%；
高度：250px；
背景尺寸：封面；
背景位置：中心；
}
.image1{
背景图像：url（“https://source.unsplash.com/MYlvxeye9J0");
}
.image2{
背景图像：url（“https://source.unsplash.com/KxCq-xveKcU");
}
.image3{
背景图像：url（“https://source.unsplash.com/CKQG961UaWo");
}
.image4{
背景图像：url（“https://source.unsplash.com/yySQipYW6Y4");
}
.image5{
背景图像：url（“https://source.unsplash.com/ZtTkB3LmlNw");
}
.image6{
背景图像：url（“https://source.unsplash.com/NdBsn0WQadw");
}
.image7{
背景图像：url（“https://source.unsplash.com/lIa03ti94ec");
}
.image8{
背景图像：url（“https://source.unsplash.com/k5wF1D_1rjo");
}
.image9{
背景图像：url（“https://source.unsplash.com/Jd8hr75moLc");
}
身体{
背景：#081935；
}
navbar先生{
背景#0d2d60；
颜色：白色；
边界底部：0；
}
.flex{
显示器：flex；
柔性包装：包装；
}
切换导航












图像库
一堆我没有拍的漂亮照片

我使用引导锅炉板将您的代码放在JSFIDLE中，我假设您希望删除图像之间的填充

默认情况下Boostrap的.col类具有左填充和右填充样式

如果将此添加到CSS中，将删除填充：

 .col-lg-4, .col-md-4, .col-sm-6 {
   padding: 0px;
 }

但是，这将改变站点范围内的列填充。不建议为列设置全局样式。我的建议是创建一个类似“img no padding”的CSS类，并将该类添加到这些列中

---

我发现了几个问题：

1） 不相关，加载jquery两次

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script> 
[...]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

[...]

2） 小尺寸（sm）的代码中存在问题： 共有3个div，其中col-sm-6，它们的总和应该是12，但3x6=18，这就是为什么第三个图像在自己的行上

3） 对于宽度小于768px左右的分辨率，将应用col md-*，我认为如果您需要特定于此情况，则需要xs cols

---

文档中的更多信息：

好了，伙计们，经过进一步研究，我找到了这个问题的精确解决方案@埃姆辛普森：这与填充物或边距无关。问题在于bootsrap 12容器网格。 正如@August所提到的：小尺寸（sm）的代码中有一个问题：有3个div的col-sm-6，它们的总和应该是12，但是3x6=18，这就是为什么第三个图像会在它自己的行上。 但我也找到了解决办法。Flex处理这个问题

.flex
{
  display: flex;
  flex-wrap: wrap;
}

如您所见，我使用了flex类，但它不起作用。因此，我用flex类将所有列嵌套在一行下，解决了这个问题。引导程序将根据累计大小知道何时将列移动到下一行

<div class="container">
            <div class="row flex">
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <div class="thumbnail">
                        <div class="image image1"></div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <div class="thumbnail">
                        <div class="image image2"></div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <div class="thumbnail">
                        <div class="image image3"></div>        
                    </div>
                </div>
            <!-- </div> -->
    <!--        <div class="row flex"> -->
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <div class="thumbnail">
                        <div class="image image4"></div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <div class="thumbnail">
                        <div class="image image5"></div>                                
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <div class="thumbnail">
                        <div class="image image6"></div>                            
                    </div>
                </div>
            <!-- </div> -->
        <!--    <div class="row flex"> -->
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <div class="thumbnail">
                        <div class="image image7"></div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <div class="thumbnail">
                        <div class="image image8"></div>                                
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <div class="thumbnail">
                        <div class="image image9"></div>                            
                    </div>
                </div>
        <!--    </div> -->
        </div>
    </div>

---

我假设您的样式表中还有更多内容。我还假设您在某个地方为缩略图、col-lg-4、col-md-4或col-sm-6类设置了边距。图像之间的间距是样式表中某个位置设置的边距。我绝对确定我没有向任何图像添加额外的边距，并且使用的所有样式都在样式标记本身下。我对bootstrap还不熟悉，我花了几乎一整天的时间在这上面，但我仍然不能正确地理解这一点。这不仅仅是关于图像。可能它们的父容器有边距或填充集？识别这些东西并不总是容易的。CSS可能很难，但底线是您在某个地方有多余的边距或边距。@emsimpson92我现在已经删除了引导样式表本身中任何额外的边距或边距。有一个15像素的填充，但我也设置为零。但现在边界仍然相互接触，没有变化。它运行得很好。非常感谢你。这是一个新手犯的错误，但我知道贝考