我正在尝试使用Bootstrap 4：https://i.imgur.com/jwHV3tn.png来使显示器看起来像这样。
我现在拥有的东西可以在https://jsfiddle.net/4bmokwpe/上看到。
如何使用Bootstrap 4 d-inline类来实现我想要的？
yyfyxzt 回答：如何使用d-inline进行某种矩阵显示？
我不是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>