html - 在引导程序 4 中调整 col 内的跨度值

Question

我目前正在使用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>

Answer 1

将列类指定为 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">