为什么在图像网格之间会出现随机空间？

Question

在阅读了一些线程之后，我设法使用了'flex'类来删除随机空格。但是我已经尝试了一切，现在我对此感到厌倦。我不能摆脱这些随机空间。谁能指出这是怎么回事？

.jumbotron {
  margin-top: 80px;
  padding-left: 40px;
  background: #0d2d60;
  color: white;
}

.image {
  width: 100%;
  height: 250px;
  background-size: cover;
  background-position: center;
}

.image1 {
  background-image: url("https://source.unsplash.com/MYlvxeye9J0");
}

.image2 {
  background-image: url("https://source.unsplash.com/KxCq-xveKcU");
}

.image3 {
  background-image: url("https://source.unsplash.com/CKQG961UaWo");
}

.image4 {
  background-image: url("https://source.unsplash.com/yySQipYW6Y4");
}

.image5 {
  background-image: url("https://source.unsplash.com/ZtTkB3LmlNw");
}

.image6 {
  background-image: url("https://source.unsplash.com/NdBsn0WQadw");
}

.image7 {
  background-image: url("https://source.unsplash.com/lIa03ti94ec");
}

.image8 {
  background-image: url("https://source.unsplash.com/k5wF1D_1rjo");
}

.image9 {
  background-image: url("https://source.unsplash.com/Jd8hr75moLc");
}

body {
  background: #081935;
}

.navbar {
  background: #0d2d60;
  color: white;
  border-bottom: 0;
}

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

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> <a class="navbar-brand" href="#"><span aria-hidden="true" class="glyphicon glyphicon-camera"></span> IMGS</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li>
          <a href="#">About Us</a>
        </li>
        <li>
          <a href="#">Contact</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a href="#">Sign Up</a>
        </li>
        <li>
          <a href="#">Login</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="jumbotron container">
  <h1><span class="glyphicon glyphicon-camera"></span> The Image Gallery</h1>
  <p>A bunch of beautiful images that I didn't take</p>
</div>
<div class="container">
  <div class="row flex">
    <div class="col-lg-4 col-md-4 col-sm-6">
      <div class="thumbnail">
        <div class="image image1"></div>
      </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-6">
      <div class="thumbnail">
        <div class="image image2"></div>
      </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-6">
      <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">
      <div class="thumbnail">
        <div class="image image4"></div>
      </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-6">
      <div class="thumbnail">
        <div class="image image5"></div>
      </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-6">
      <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">
      <div class="thumbnail">
        <div class="image image7"></div>
      </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-6">
      <div class="thumbnail">
        <div class="image image8"></div>
      </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-6">
      <div class="thumbnail">
        <div class="image image9"></div>
      </div>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

Random Space between the Images

On screen size sm and x-sm

Works perfectly If the sceen size is large

Answer 1

我看到几个问题：

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）的代码中存在问题： col-sm-6有3个div，它们的总和应为12，但3x6 = 18，这就是为什么第三张图片占据一行的原因。

3）对于小于768像素左右宽的分辨率，将应用col-md- *，如果您需要这种情况的话，我认为您需要xs cols。

文档中的更多信息：Boostrap 3 - Grid

Answer 2

我使用引导程序样板将代码放在jsfiddle中，并且假设您要删除图像之间的填充？

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

如果将其添加到CSS中，则会删除填充：

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

但是，这将更改整个站点的列填充。不建议您为列设置全局样式。我的建议是创建一个类似“ img-no-padding”的CSS类，然后将该类添加到这些列中。

Here is a jsfiddle demonstrating this.

Answer 3

好的，经过更多研究，我找到了解决该问题的确切方法。 @emsimpson与填充或边距无关。问题出在bootsrap 12容器网格上。 正如@August所提到的：小尺寸（sm）代码存在问题：col-sm-6有3个div，它们的总和应为12，但 3x6 = 18 ，这就是为什么第三张图片排成一行。 但是我也找到了解决方案。 Flex处理此问题。

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

如您所见，我使用了flex类，但是没有用。因此，我将所有列嵌套在具有flex类的一行下，这样就解决了该问题。 Bootstrap会根据累积的大小知道何时将这些列移到下一行。

<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>