【发布时间】：2018-12-02 02:38:03
【问题描述】：
在阅读了一些帖子之后，我设法使用“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>【问题讨论】：
-
我假设您的样式表还不止这些。我还假设您在某个地方为缩略图、col-lg-4、col-md-4 或 col-sm-6 类设置了边距。图片之间的间距是样式表中设置的边距。
-
我绝对确定我没有为任何图像添加额外的边距，并且所有使用的样式都在样式标签下。我是 bootstrap 新手，我几乎一整天都在做这件事，但我仍然无法做到这一点。
-
不仅仅是图片。也许他们的父容器有边距或填充集？识别这些东西并不总是那么容易。 CSS 可能很困难，但底线是你有多余的边距或填充 somewhere.
-
@emsimpson92 我现在已经删除了引导样式表本身中任何额外的填充或边距。有一个 15px 的填充，但我也将其设置为零。但现在边界仍然相互接触，没有任何变化。
标签： html css twitter-bootstrap-3 flexbox