投资组合项目对齐答案

【问题标题】：Portfolio Item Alignment投资组合项目对齐
【发布时间】：2019-11-10 19:15:14
【问题描述】：

我想以水平对齐方式显示项目，但正如您在下图中看到的那样，它们是垂直对齐的。

这是我的代码：

<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>
  @foreach (\App\Project::all()->take(6) as $project)
  <div class="row">
    <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>

我在这里错过了什么？

【问题讨论】：

标签： php html css vue.js

【解决方案1】：

您在每个 col- 项目之后在循环中启动 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>
    <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>

【讨论】：