Portfolio项目横向排列异常排查：当前垂直排列如何修正？

嘿，我一眼就发现问题所在啦——你把每个项目都包裹在了单独的.row容器里！

Bootstrap的.row是用来承载一行内的列元素的，你现在每循环一个项目就新建一行，那每个项目自然就独占一行，呈现垂直排列了。要实现横向排列，只需要把.row移到循环外面，让所有项目列都放在同一个行容器里就行。

修改后的代码 #

<section class="bg-light" id="portfolio">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h2 class="section-heading text-uppercase">Projects</h2>
        <h3 class="section-subheading text-muted">Projects elaborated throughout the years</h3>
      </div>
    </div>
    <!-- 把row放在循环外面，所有项目都在这一行里 -->
    <div class="row">
      @foreach (\App\Project::all()->take(6) as $project)
        <div class="col-md-4 col-sm-6 portfolio-item">
          <a class="portfolio-link" data-toggle="modal" href="#portfolioModal1">
            <div class="portfolio-hover">
              <div class="portfolio-hover-content">
                <i class="fas fa-plus fa-3x"></i>
              </div>
            </div>
            <img class="img-fluid" src="img/portfolio/project.jpg" alt="">
          </a>
          <div class="portfolio-caption">
            <h5>Project ID: {{ $project->id }}</h5>
            <p class="text-muted">{{ $project->title }}</p>
          </div>
        </div>
      @endforeach
    </div>
  </div>
</section>

额外说明 #

• 调整后，Bootstrap栅格系统会自动处理排列：中等屏幕（md及以上）每行显示3个项目（因为col-md-4是12栅格中的4份，12/4=3），小屏幕（sm）每行显示2个项目（col-sm-6对应12/6=2），完美实现横向排列。
• 注意检查HTML标签的嵌套，确保@foreach和.row的闭合标签位置正确，避免结构错误影响样式。

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