如何解决在 bootstrap 4 中调整 col 内的跨度值
我目前为卡片使用 bootstrap 4。我想在我的卡旁边添加一个编号。如下图所示。
我尝试在 span 文本上添加 padding-top,这与 span 文本的指定 col 相同,但它旁边的卡片也在调整。谁能帮我解决这个问题?
我希望编号位于卡片的顶部或中间的水平范围内,如您所见,它位于卡片上方。
<div class="container">
<div class="col-sm-2">
<span style="display:inline-block; padding-top: 15px;" >1</span>
</div>
<div class="col-sm-12">
<div class="card h-100" style="width: 15rem;">
<div>
<a class="fancybox" href="admin/files/Images/Flutterfest.png">
<img class="card-img-top" src="admin/files/Images/Flutterfest.png">
</a>
</div>
<div class="card-body">
<h5 class="card-title text-center">Library Management System</h5>
<p class="card-text">Date added: <span>May 23,2021</span></p>
</div>
</div>
</div>
</div>
解决方法
将列类指定为 col-sm-2 和 col-sm-10。在引导程序中最多可以创建 12 列。所以你已经给了 col-sm-12 给第二个 div 这就是为什么它会转到下一行
<div class="col-sm-2">
<span style="display:inline-block; padding-top: 15px;" >1</span>
</div>
<div class="col-sm-10">
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。