html - 引导卡列的问题 - 显示混乱
问题描述
我正在尝试制作砖石卡,并且为此使用了 bootstrap 4,在添加 card-columns 类之前一切正常。
我的html是:
<div class="wrapper">
<div class="container-fluid">
<div class="col-12">
<div class="row">
<?php echo
'<div class="col-md-2">
<div class="card-columns">
<div class="card">
<a href="'.$global_url.'post/'.$row['post_seo_url'].'"><img class="card-img-top img-fluid" src="'.$global_url.'uploads/post_thumbnails/'.$row['post_thumbnail'].'" alt="Thumbnail"></a>
<div class="card-body">
<h4 class="card-title">'.$row['post_name'].'</h4>
<p class="card-text">'.short_post($row['post_text'],$rand).' <a href="'.$global_url.'post/'.$row['post_seo_url'].'">read more..</a></p>
<p class="card-text">
<small class="text-muted">Author: '.GetProfileNickName($row['post_author']).'</small>
</p>
</div>
</div>
</div>
</div>'; ?>
</div>
</div>
</div>
</div>
我正在使用 PHP 获取信息并将其打印为卡片。
Bootstrapcard-columns
中的参考。
解决方案
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<?php echo
'<div class="col-md-2">
<div class="card-columns">
<div class="card">
<a href="'.$global_url.'post/'.$row['post_seo_url'].'"><img class="card-img-top img-fluid" src="'.$global_url.'uploads/post_thumbnails/'.$row['post_thumbnail'].'" alt="Thumbnail"></a>
<div class="card-body">
<h4 class="card-title">'.$row['post_name'].'</h4>
<p class="card-text">'.short_post($row['post_text'],$rand).' <a href="'.$global_url.'post/'.$row['post_seo_url'].'">read more..</a></p>
<p class="card-text">
<small class="text-muted">Author: '.GetProfileNickName($row['post_author']).'</small>
</p>
</div>
</div>
</div>
</div>'; ?>
</div>
</div>
</div>
</div>
您在声明行之前已经声明了 col-12 div
推荐阅读
- python - 在Django中提交多页表单后清除会话数据
- reactjs - 如果字段不为空,Graphql Hasura 更新
- intellij-idea - IntelliJ 不显示生成选项
- angular - 从 ionic 4 中的服务调用页面的功能
- php - 如何在 Laravel 中获取字符串中的所有列值
- python-3.x - 为什么变量(第 6 行)有一个白色的空格?(Nivel: 初级工作流程符石)
- python - 在python中通过引用传递
- autohotkey - 使用 ControlClick 和 WinTitle 的问题
- wordpress - wordpress 在将文本显示给浏览器之前替换文本
- cypress - 赛普拉斯:如果未找到来自“cy.route()”的请求,则测试失败