技术求助：如何分离同一行布局中的两张图片？

嘿，我看你遇到的问题是同一行里的两张图片挤在一起没分开对吧？咱们来一步步搞定它～

问题根源 #

你给.zgrade设置了固定宽度width: 745px，这直接打破了Bootstrap栅格系统（col-sm-6）的响应式布局逻辑——col-sm-6本来是让每个列占父容器的50%宽度，但固定宽度会让每个图片容器超出列的范围，两个容器就挤在一起了。

解决方案 #

按以下步骤调整你的代码：

1. 移除固定宽度，让容器自适应栅格列
   删掉.zgrade里的width: 745px，如果希望大屏幕上图片容器不要太宽，可以用max-width替代，同时加margin: 0 auto让容器居中。

2. 修正图片的CSS选择器
   你HTML里的img标签没有.zgradeimg类，所以原来的.zgradeimg选择器无效，改成.zgrade img才能选中图片。

3. 完善文字样式（可选）
   把标题的style="color:white"移到CSS里，同时给.zgrade-txt加text-align: center让文字居中，另外记得闭合原来未完成的CSS代码。

修改后的完整代码 #

CSS代码：

.zgrade { 
  position: relative; 
  border: 1px solid #333; 
  overflow: hidden; 
  /* 用max-width替代固定width，兼顾大屏幕和响应式 */
  max-width: 745px;
  margin: 0 auto;
} 
.zgrade img { 
  width: 100%; /* 确保图片占满父容器 */
  -moz-transition: all 0.3s ease-in-out; 
  -webkit-transition: all 0.3s ease-in-out; 
  transition: all 0.4s ease-in-out; 
} 
.zgrade:hover img { 
  -moz-transform: scale(1.1); 
  -webkit-transform: scale(1.1); 
  transform: scale(1.1); 
} 
.zgrade-txt { 
  position: absolute; 
  top: 250px; 
  left: 0; 
  width: 100%; 
  color: white;
  text-align: center;
}

HTML代码（无需改动，除非你想移除行内样式）：

<div id="portfolio"> 
 <div class="container-fluid w-75"> 
  <div class="row"> 
   <div class="col-sm-6 col-xs-12 text-center"> 
    <div class="zgrade"> 
     <img class="img-fluid" src="assets/img/szgrade/zgradaA.jpg" alt="..." /> 
     <h2 class="zgrade-txt"> Zgrada A </h2> 
    </div> 
   </div> 
   <div class="col-sm-6 col-xs-12 text-center"> 
    <div class="zgrade"> 
     <img class="img-fluid" src="assets/img/szgrade/zgradaB.jpg" alt="..." /> 
     <h2 class="zgrade-txt"> Zgrada B </h2> 
    </div> 
   </div> 
  </div> 
 </div> 
</div>

为什么加br/span没用？ #

因为问题本质是容器宽度超出了栅格列的限制，不是行内元素的换行问题，所以调整行内标签根本解决不了核心矛盾，得从布局宽度入手～

内容的提问来源于stack exchange，提问作者the nr