Angular中无法实现每行显示三张图片问题求助

看起来你是想用Bootstrap栅格配合Angular的ng-repeat实现每行三张图片的效果，现在每行只显示一张，大概率是DOM结构没符合Bootstrap栅格的要求，我给你几个可行的解决方案：

方案一：用Bootstrap的row包裹所有图片列 #

Bootstrap的栅格系统要求列（col-*）必须放在行（row）里面，这样三个col-sm-4（每个占4列，3×4=12，刚好填满一行）会自动并排显示。调整你的代码如下：

<div class="row">
  <div ng-repeat="p in imageses" class="col-sm-4">
    <img ng-src="{{p.path}}" class="rounded"/>
  </div>
</div>

这个方案的优势是简单直接，Bootstrap会自动处理换行——当图片数量超过3个时，第四张会自动跳到下一行，而且响应式也能正常工作（在小于768px的屏幕上，每个col-sm-4会变成100%宽度，每行显示一张，符合移动端的体验）。

方案二：强制每行仅显示3张（适合严格分组需求） #

如果你的需求是不管最后一行有几张，都要放在一个独立的row里，那可以利用ng-repeat的$index来分组，每3个图片生成一个新的row：

<div ng-repeat="p in imageses" ng-if="$index % 3 === 0" class="row">
  <div class="col-sm-4" ng-repeat="img in imageses.slice($index, $index+3)">
    <img ng-src="{{img.path}}" class="rounded"/>
  </div>
</div>

这个逻辑是：外层ng-repeat只在索引为3的倍数（0、3、6...）时生成row，然后内层ng-repeat遍历当前组的3个图片，确保每行最多3张。

额外检查点 #

如果调整结构后还是不行，你可以排查这几点：

• 确认已经正确引入了Bootstrap的CSS文件，没有遗漏或版本冲突；
• 检查是否有自定义CSS覆盖了col-sm-4的样式，比如设置了display: block !important或者width: 100%，这会导致列无法并排；
• 测试时确保屏幕宽度在768px以上（sm断点），因为col-sm-4只在小屏幕及以上生效，手机端默认是堆叠显示的。

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