时间戳

首页 > 解决方案 > 网格应该是水平的，但显示为垂直的

html - 网格应该是水平的，但显示为垂直的

问题描述

我试图在水平行中显示一些项目 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>

标签： htmlcssbootstrap-4

解决方案

bootstrap cols 需要与行嵌套才能正常工作，您可以通过将包装器从p.card-textto转换来修复代码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-->

推荐阅读