如何删除这个空格->
我想让底部的那两张图片像右边那张一样向上移动。
我认为我不应该使用 col-md-* 但还是不明白。
.portfolio {
}
.portfolio h4 {
font-size: 28px;
font-weight: 600;
font-family: 'Lora', serif;
margin-bottom: 20px;
}
.portfolio-item {
padding: 10px;
border-bottom: 1px solid #eee;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="portfolio col-md-10-col-md-offset-1">
<h4>Portfolio</h4>
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="#"><img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQCjQExMw62RkDP1tvZlwy1J5ADRnZ-ani4mm5Raezxh4DEabaL5A" alt=""></a>
<h3><a href="#">Wongilang.xyz</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
</div>
<div class="col-md-4 portfolio-item">
<a href="#"><img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ8zJArifA6qRmMAvaZL_EGhHZsRYc4te-OtUqXABmoctaLpHw-pQ" alt=""></a>
<h3><a href="#">Intanrahmadhani.web.id</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
</div>
<div class="col-md-4 portfolio-item">
<a href="#"><img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQCjQExMw62RkDP1tvZlwy1J5ADRnZ-ani4mm5Raezxh4DEabaL5A" alt=""></a>
<h3><a href="#">E-Monev SD/SMP/SMA Muhammadiyah DIY</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
</div>
<div class="col-md-4 portfolio-item">
<a href="#"><img class="img-responsive" src="http://okdogi.com/wp-content/uploads/2015/12/kucing-Scotish-fold-.jpg" alt=""></a>
<h3><a href="#">Intanrahmadhani.web.id</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
</div>
<div class="col-md-4 portfolio-item">
<a href="#"><img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQCjQExMw62RkDP1tvZlwy1J5ADRnZ-ani4mm5Raezxh4DEabaL5A" alt=""></a>
<h3><a href="#">Wongilang.xyz</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
</div>
<div class="col-md-4 portfolio-item">
<a href="#"><img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ8zJArifA6qRmMAvaZL_EGhHZsRYc4te-OtUqXABmoctaLpHw-pQ" alt=""></a>
<h3><a href="#">Intanrahmadhani.web.id</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
</div>
<div class="col-md-4 portfolio-item">
<a href="#"><img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQCjQExMw62RkDP1tvZlwy1J5ADRnZ-ani4mm5Raezxh4DEabaL5A" alt=""></a>
<h3><a href="#">E-Monev SD/SMP/SMA Muhammadiyah DIY</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales. </p>
</div>
<div class="col-md-4 portfolio-item">
<a href="#"><img class="img-responsive" src="http://okdogi.com/wp-content/uploads/2015/12/kucing-Scotish-fold-.jpg" alt=""></a>
<h3><a href="#">Intanrahmadhani.web.id</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat at neque in tincidunt. Suspendisse blandit tellus vitae nunc congue, at tristique nulla sodales.</p>
</div>
</div>
</div>
</div>
</div>最佳答案
您的图片似乎具有不同的高度，因此您可以看到第一张图片和第二张图片下方的空白区域不相同，最后两张图片紧跟在第四张图片 (intanrahmadhani.web.id) 之后。
您可以调整/裁剪这些图像以确保高度一致，或者对图像容器应用固定高度。
.portfolio h4 {
font-size: 28px;
font-weight: 600;
font-family: 'Lora', serif;
margin-bottom: 20px;
}
.portfolio-item {
padding: 10px;
border-bottom: 1px solid #eee;
}
.portfolio-item > a:link,
.portfolio-item > a:visited {
display: block;
height: 300px;
overflow: hidden;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="portfolio">
<h4>Portfolio</h4>
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="#"><img class="img-responsive" src="http://placehold.it/450x650" alt=""></a>
<h3><a href="#">Wongilang.xyz</a></h3>
<p>...</p>
</div>
<div class="col-md-4 portfolio-item">
<a href="#"><img class="img-responsive" src="http://placehold.it/450x450" alt=""></a>
<h3><a href="#">Intanrahmadhani.web.id</a></h3>
<p>...</p>
</div>
<div class="col-md-4 portfolio-item">
<a href="#"><img class="img-responsive" src="http://placehold.it/450x250" alt=""></a>
<h3><a href="#">E-Monev SD/SMP/SMA Muhammadiyah DIY</a></h3>
<p>...</p>
</div>
<div class="col-md-4 portfolio-item">
<a href="#"><img class="img-responsive" src="http://placehold.it/450x550" alt=""></a>
<h3><a href="#">Intanrahmadhani.web.id</a></h3>
<p>...</p>
</div>
<div class="col-md-4 portfolio-item">
<a href="#"><img class="img-responsive" src="http://placehold.it/450x350" alt=""></a>
<h3><a href="#">E-Monev SD/SMP/SMA Muhammadiyah DIY</a></h3>
<p>...</p>
</div>
<div class="col-md-4 portfolio-item">
<a href="#"><img class="img-responsive" src="http://placehold.it/450x750" alt=""></a>
<h3><a href="#">Wongilang.xyz</a></h3>
<p>...</p>
</div>
</div>
</div>关于html - 如何删除css上的空格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40198899/