在 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">