投资组合项目对齐

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>