在 bootstrap 4 中调整列内的跨度值

Question

我目前正在使用 bootstrap 4 作为卡片。我想在我的卡旁边添加一个编号。如下图所示。

我尝试在跨度文本上添加 padding-top，这与跨度文本的指定列相同，但它旁边的卡片也在调整。谁能帮我解决这个问题？

我希望编号位于卡片的顶部或中间的水平范围内，如您所见，它在卡片上方。

<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。您最多可以在 bootstrap 中创建 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">

在 bootstrap 4 中调整列内的跨度值

adjusting span value inside a col in bootstrap 4

html

css

bootstrap-4

bootstrap-grid

bootstrap-cards