网格应为水平，但应显示为垂直

Question

我试图在水平行中显示一些项目4，但它们都垂直显示。有什么建议可以使布局正确吗？

<div class="col-lg-12 col-sm-12 portfolio-item">
  <div class="card">
    <div class="card-body">
      <p class="card-text"><strong>Portfolio</strong></p>
      <p class="card-text">

                      <?php require_once('includes/content_portfolio.php');

                        for ($i = 0; $i < $i_portfolio; $i++) { echo'

                            <div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
                              <div class="card">
                                <a href="#"><img class="card-img-top" src="img/portfolio/'.$portfolio[$i][1].'" alt="" style="border:20px solid white;"></a>
                                <div class="card-body">
                                  <h5 class="card-title">
                                    '.$portfolio[$i][0].'
                                  </h5>
                                  <p class="card-text" style="overflow-y: scroll; height:200px;"><small>'.$portfolio[$i][2].'</small></p>
                                </div>
                              </div>
                            </div>';

                        } ?>

      </p>
    </div>
  </div>
</div>

Answer 1

bootstrap cols必须与行嵌套才能正常工作，您可以通过将包装器从p.card-text更改为div.row来修复代码：

      <p class="card-text"><strong>Portfolio</strong></p>
      <div class="row"><!-- HERE-->

                  <?php require_once('includes/content_portfolio.php');

                    for ($i = 0; $i < $i_portfolio; $i++) { echo'

                        <div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
                          <div class="card">
                            <a href="#"><img class="card-img-top" src="img/portfolio/'.$portfolio[$i][1].'" alt="" style="border:20px solid white;"></a>
                            <div class="card-body">
                              <h5 class="card-title">
                                '.$portfolio[$i][0].'
                              </h5>
                              <p class="card-text" style="overflow-y: scroll; height:200px;"><small>'.$portfolio[$i][2].'</small></p>
                            </div>
                          </div>
                        </div>';

                    } ?>

    </div><!-- /row-->

Answer 2

您的卡需要放在另一个<div class="row">中，刚刚对其进行了测试，现在看来可以正常工作。您可以将其放在<p class="card-text">下方和<?php require_once('includes/content_portfolio.php');上方

Answer 3

您可能要考虑使用flexbox。

.card-text {
  display: flex;
  justify-content: space-around;
}

.card {
  text-align: center;
  border: thin solid red; /* for visibility only */
}

.card:not(:last-child) {
  margin: 0 1rem 0 0;
}

<div class="col-lg-12 col-sm-12 portfolio-item">
  <div class="card">
    <div class="card-body">
      <p class="card-text"><strong>Portfolio</strong></p>
      <div class="card-text">
        <div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
          <div class="card">
            <a href="#"><img class="card-img-top" src="https://via.placeholder.com/100x100" alt="" style="border:20px solid white;"></a>
            <div class="card-body">
              <h5 class="card-title">
                Title
              </h5>
              <p class="card-text" style="overflow-y: scroll; height:200px;"><small>Text</small></p>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
          <div class="card">
            <a href="#"><img class="card-img-top" src="https://via.placeholder.com/100x100" alt="" style="border:20px solid white;"></a>
            <div class="card-body">
              <h5 class="card-title">
                Title
              </h5>
              <p class="card-text" style="overflow-y: scroll; height:200px;"><small>Text</small></p>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
          <div class="card">
            <a href="#"><img class="card-img-top" src="https://via.placeholder.com/100x100" alt="" style="border:20px solid white;"></a>
            <div class="card-body">
              <h5 class="card-title">
                Title
              </h5>
              <p class="card-text" style="overflow-y: scroll; height:200px;"><small>Text</small></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>