<分区>
html - 网格应该是水平的但显示为垂直
标签 html css bootstrap-4
我试图在水平行中显示某些元素 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>
最佳答案
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-->
关于html - 网格应该是水平的但显示为垂直，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52521917/