html - 为什么我在图像网格之间得到随机空间？

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) small size (sm) 的代码有问题:有 3 个带有 col-sm-6 的 div，它们的总和应该是 12，但是 3x6 = 18，这就是为什么第三张图片在它自己的行上。

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

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