时间戳

首页 > 解决方案 > 为什么我在图像网格之间出现随机空间？

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

问题描述

在阅读了一些线程之后，我设法使用“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>

图像之间的随机空间

屏幕尺寸 sm 和 x-sm

如果屏幕尺寸很大，效果很好

标签： htmlcsstwitter-bootstrap-3flexbox

解决方案

我看到几个问题：

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。

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

推荐阅读