我想制作一个引导网格。我尝试使用此网格，但有时图像会像屏幕截图中一样全部堆叠起来。
重新加载页面时遇到这些问题。我不能说问题是否出在我的图像上（分辨率或其他原因），因为我是HTML新手...
HTML：
<!-- portfolio -->
<div id="portfolio" class="services portfolio">
<div class="container">
<h3 class="w3title">Nos appartements</h3>
<p class="wthree-ttext">Choisissez la région désirée à l'aide du filtre</p>
<div class="gallery_gds">
<ul class="simplefilter">
<li class="active" data-filter="all">Tout</li>
<li data-filter="1">Sherbrooke Nord</li>
<li data-filter="2">Sherbrooke Est</li>
<li data-filter="3">Magog</li>
</ul>
<div class="filtr-container">
<div class="col-md-4 col-sm-4 col-xs-6 filtr-item" data-category="1" data-sort="Luminous night">
<div class="agileits-img">
<a href="1-100-Don-Bosco-5-NC.html">
<img src="images/photos/exterieur/100-don-bosco-appartement-louer.jpg" alt="" class="img-responsive" />
<div class="wthree-pcatn">
<h4>1er juillet 2019</h4>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-6 filtr-item" data-category="1" data-sort="Busy streets">
<div class="agileits-img">
<a href="1-100-Don-Bosco-3.html">
<img class="img-responsive " src="images/photos/exterieur/100-don-bosco-appartement-louer.jpg" alt="" />
<div class="wthree-pcatn">
<h4>Libre immédiatement</h4>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-6 filtr-item" data-category="1" data-sort="Busy streets">
<div class="agileits-img">
<a href="1-100-Don-Bosco-1.html">
<img class="img-responsive " src="images/photos/exterieur/100-don-bosco-appartement-louer.jpg" alt="" />
<div class="wthree-pcatn">
<h4>Libre immédiatement</h4>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-6 filtr-item" data-category="1" data-sort="Busy streets">
<div class="agileits-img">
<a href="2-2985-Ladauversiere-4-NC.html">
<img class="img-responsive " src="images/photos/exterieur/2985-la-dauversiere-appartement-louer.jpg" alt="" />
<div class="wthree-pcatn">
<h4>Libre immédiatement</h4>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-6 filtr-item" data-category="1" data-sort="Busy streets">
<div class="agileits-img">
<a href="2-2985-Ladauversiere-4.html">
<img class="img-responsive " src="images/photos/exterieur/2985-la-dauversiere-appartement-louer.jpg" alt="" />
<div class="wthree-pcatn">
<h4>1er juillet 2019</h4>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-6 filtr-item" data-category="1" data-sort="Busy streets">
<div class="agileits-img">
<a href="2-2985-Ladauversiere-3.html">
<img class="img-responsive " src="images/photos/exterieur/2985-la-dauversiere-appartement-louer.jpg" alt="" />
<div class="wthree-pcatn">
<h4>Libre immédiatement</h4>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-6 filtr-item" data-category="1" data-sort="Busy streets">
<div class="agileits-img">
<a href="2-2985-Ladauversiere-2.html">
<img class="img-responsive " src="images/photos/exterieur/2985-la-dauversiere-appartement-louer.jpg" alt="" />
<div class="wthree-pcatn">
<h4>Libre immédiatement</h4>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-6 filtr-item" data-category="2" data-sort="Busy streets">
<div class="agileits-img">
<a href="3-590-Saint-Francois-4-NC.html">
<img class="img-responsive " src="images/photos/exterieur/590-saint-francois-appartement-louer.jpg" alt="" />
<div class="wthree-pcatn">
<h4>Libre immédiatement</h4>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-6 filtr-item" data-category="2" data-sort="Busy streets">
<div class="agileits-img">
<a href="4-1415-1425-du-Conseil-4.html">
<img class="img-responsive " src="images/photos/exterieur/1415-1425-conseil-appartement-louer.jpg" alt="" />
<div class="wthree-pcatn">
<h4>Libre immédiatement</h4>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-6 filtr-item" data-category="2" data-sort="Busy streets">
<div class="agileits-img">
<a href="4-1415-1425-du-Conseil-3.html">
<img class="img-responsive " src="images/photos/exterieur/1415-1425-conseil-appartement-louer.jpg" alt="" />
<div class="wthree-pcatn">
<h4>1er juillet 2019</h4>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-6 filtr-item" data-category="1" data-sort="Busy streets">
<div class="agileits-img">
<a href="5-300-des-Erables-5.html">
<img class="img-responsive " src="images/photos/exterieur/300-des-erables-appartement-louer.jpg" alt="" />
<div class="wthree-pcatn">
<h4>1er juillet 2019</h4>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-6 filtr-item" data-category="1" data-sort="Busy streets">
<div class="agileits-img">
<a href="6-2800-du-Manoir-4.html">
<img class="img-responsive " src="images/photos/exterieur/2800-manoir-appartement-louer.jpg" alt="" />
<div class="wthree-pcatn">
<h4>1er avril 2019</h4>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-6 filtr-item" data-category="1" data-sort="Busy streets">
<div class="agileits-img">
<a href="7-2820-du-Manoir-3.html">
<img class="img-responsive " src="images/photos/exterieur/2820-manoir-appartement-louer.jpg" alt="" />
<div class="wthree-pcatn">
<h4>1er juillet 2019</h4>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-6 filtr-item" data-category="1" data-sort="Busy streets">
<div class="agileits-img">
<a href="8-2840-du-Manoir-4-NC.html">
<img class="img-responsive " src="images/photos/exterieur/2860-manoir-appartement-louer.jpg" alt="" />
<div class="wthree-pcatn">
<h4>1er juillet 2019</h4>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-6 filtr-item" data-category="1" data-sort="Busy streets">
<div class="agileits-img">
<a href="9-2860-du-Manoir-4.html">
<img class="img-responsive " src="images/photos/exterieur/2860-manoir-appartement-louer.jpg" alt="" />
<div class="wthree-pcatn">
<h4>1er juillet 2019</h4>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-6 filtr-item" data-category="1" data-sort="Busy streets">
<div class="agileits-img">
<a href="10-2880-du-Manoir-4-NC.html">
<img class="img-responsive " src="images/photos/exterieur/2880-manoir-appartement-louer.jpg" alt="" />
<div class="wthree-pcatn">
<h4>1er mars 2019</h4>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-6 filtr-item" data-category="3" data-sort="Busy streets">
<div class="agileits-img">
<a href="11-1260-Champlain-3.html">
<img class="img-responsive " src="images/photos/exterieur/1260-champlain-appartement-louer.jpg" alt="" />
<div class="wthree-pcatn">
<h4>1er mars 2019</h4>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-6 filtr-item" data-category="3" data-sort="Busy streets">
<div class="agileits-img">
<a href="13-217-223-Calixa-Lavallee-4.html">
<img class="img-responsive " src="images/photos/exterieur/217-calixa-lavallee-appartement-louer.jpg" alt="" />
<div class="wthree-pcatn">
<h4>1er juillet 2019</h4>
</div>
</a>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
</div>
<!-- //portfolio -->
问题：https://imgur.com/PYa7qfp， 预期的结果：https://imgur.com/XM0XkWl。
答案 0 :(得分：1)
您可以按以下方式更新代码。
示例：
<img class="img-responsive " src="/project_name/images/photos/exterieur/217-calixa-lavallee-appartement-louer.jpg" alt="" />