Bootstrap 4中调整col内span位置不影响相邻卡片的解决方案问询

问题原因 #

1. 你的栅格布局不符合Bootstrap 4的规则：栅格系统每行的总列数不能超过12，你同时使用col-sm-2和col-sm-12，总宽度超过12导致两个列自动换行，所以编号会显示在卡片上方。
2. 不需要手动加padding调整位置，用Bootstrap自带的flex对齐工具类就能轻松实现编号和卡片的对齐。

解决方法 #

先给两个外层col套上row容器，调整栅格比例，再给row加上对齐类即可：

• 要编号对齐卡片顶部，加align-items-start
• 要编号对齐卡片中部，加align-items-center

修正后的代码如下：

<div class="container">
  <!-- 加row容器，设置对齐规则，这里用居中对齐为例，要顶部对齐就换成align-items-start -->
  <div class="row align-items-center">
    <div class="col-sm-1">
      <span>1</span>
    </div>
    <!-- 调整列宽，总列数加起来为12即可，你可以根据自己想要的编号和卡片间距调整比例 -->
    <div class="col-sm-11">
      <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>
</div>

如果需要调整编号和卡片的水平间距，直接调整两个col的占比即可，比如把编号列改成col-sm-2，卡片列改成col-sm-10就行。

内容的提问来源于stack exchange，提问作者Mike