投资组合项目对齐

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