我如何使用引导程序使三个元素组成的行？ [关闭]
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我如何使用引导程序使三个元素组成的行？ [关闭]相关的知识，希望对你有一定的参考价值。
[我正在尝试使用Bootstrap 4：https://i.imgur.com/jwHV3tn.png制作这样的显示，基本上每行显示3个元素。
元素如下：
<div class="sprite d-inline-block bg-info rounded p-1 m-1">
<span class="sprite-span-level">Top-right text over image</span>
<img class="sprite-img" src="http://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
<span class="sprite-span-nickname">Text under image</span>
</div>
我现在所拥有的可以在https://jsfiddle.net/4bmokwpe/看到。
如何使用Bootstrap 4实现我想要的？
答案
我不是100％地确定您要实现的目标，但是如果您想使用引导程序，我建议您使用现有的网格类，“容器”，“行”和“ col-*”。
看看：https://getbootstrap.com/docs/4.0/layout/grid/
这是您的标记外观：
.sprite {
text-align: center;
position: relative;
}
.sprite-span-level {
position: absolute;
right: 5px;
}
.sprite-img {
width: 100%;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-4">
<div class="sprite bg-info rounded p-1 m-1">
<span class="sprite-span-level">Top-right text over image</span>
<img class="sprite-img" src="http://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
<span class="sprite-span-nickname">Text under image</span>
</div>
</div>
<div class="col-4">
<div class="sprite bg-info rounded p-1 m-1">
<span class="sprite-span-level">Top-right text over image</span>
<img class="sprite-img" src="http://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
<span class="sprite-span-nickname">Text under image</span>
</div>
</div>
<div class="col-4">
<div class="sprite bg-info rounded p-1 m-1">
<span class="sprite-span-level">Top-right text over image</span>
<img class="sprite-img" src="http://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
<span class="sprite-span-nickname">Text under image</span>
</div>
</div>
<div class="col-4">
<div class="sprite bg-info rounded p-1 m-1">
<span class="sprite-span-level">Top-right text over image</span>
<img class="sprite-img" src="http://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
<span class="sprite-span-nickname">Text under image</span>
</div>
</div>
<div class="col-4">
<div class="sprite bg-info rounded p-1 m-1">
<span class="sprite-span-level">Top-right text over image</span>
<img class="sprite-img" src="http://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
<span class="sprite-span-nickname">Text under image</span>
</div>
</div>
<div class="col-4">
<div class="sprite bg-info rounded p-1 m-1">
<span class="sprite-span-level">Top-right text over image</span>
<img class="sprite-img" src="http://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
<span class="sprite-span-nickname">Text under image</span>
</div>
</div>
</div>
</div>另一答案
您想要这样的东西...？
.col-wraper {
border: 5px solid red;
height: 100%;
background: #000;
color: #fff;
text-align: center;
min-height:200px
}
.col-lg-4.col-md-4.col-sm-4.col-4 {
padding-bottom: 10px;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="col-wraper">
1
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="col-wraper">
2
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="col-wraper">
3
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="col-wraper">
4
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="col-wraper">
5
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="col-wraper">
6
</div>
</div>
</div>以上是关于我如何使用引导程序使三个元素组成的行？ [关闭]的主要内容，如果未能解决你的问题，请参考以下文章