投资组合项目对齐

Question

我想以水平对齐方式显示项目，但如下图所示，它们是垂直的。

这是我的代码：

<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>

我在这里缺少什么？

Answer 1

您row在每个col-项目之后开始循环。尝试这个<section class="bg-light" id="portfolio">&nbsp; <div class="container">&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; <div class="col-lg-12 text-center">&nbsp; &nbsp; &nbsp; &nbsp; <h2 class="section-heading text-uppercase">Projects</h2>&nbsp; &nbsp; &nbsp; &nbsp; <h3 class="section-subheading text-muted">Projects elaborated throughout the years</h3>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; @foreach (\App\Project::all()->take(6) as $project)&nbsp; &nbsp; &nbsp; <div class="col-md-4 col-sm-6 portfolio-item">&nbsp; &nbsp; &nbsp; &nbsp; <a class="portfolio-link" data-toggle="modal" href="#portfolioModal1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="portfolio-hover">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="portfolio-hover-content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fas fa-plus fa-3x"></i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img class="img-fluid" src="img/portfolio/project.jpg" alt="">&nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; <div class="portfolio-caption">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h5>Project ID: {{ $project->id }}</h5>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="text-muted">{{ $project->title }}</p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; @endforeach&nbsp; &nbsp; </div>&nbsp; </div></section>