如何在Bootstrap 4中实现无序列表的垂直居中与响应式适配

问题根因 #

你使用的.justify-content-center、.align-self-center属于Flex布局工具类，只有父元素声明为Flex容器时这些类才会生效。默认的行内列表元素采用基线对齐规则，小屏换行时就会出现高低错位的问题。

解决方案 #

步骤1：修改列表容器的类属性

给<ul>标签添加Flex相关的Bootstrap工具类，开启Flex布局、支持自动换行、设置水平/垂直居中规则，修改后的代码如下：

<div class="choices mt-5">
   <ul class="list-inline d-flex flex-wrap justify-content-center align-items-center text-center">
      <li class="list-inline-item labels mx-2 my-1"><span class="text-muted">about to quit</span></li>
      <li id="number_0" class="list-inline-item numberCircle mx-2 my-1"><span>1</span></li>
      <li id="number_1" class="list-inline-item numberCircle mx-2 my-1"><span>2</span></li>
      <li id="number_2" class="list-inline-item numberCircle mx-2 my-1"><span>3</span></li>
      <li id="number_3" class="list-inline-item numberCircle mx-2 my-1"><span>4</span></li>
      <li id="number_4" class="list-inline-item numberCircle mx-2 my-1"><span>5</span></li>
      <li id="number_5" class="list-inline-item numberCircle mx-2 my-1"><span>6</span></li>
      <li id="number_6" class="list-inline-item numberCircle mx-2 my-1"><span>7</span></li>
      <li id="number_7" class="list-inline-item numberCircle mx-2 my-1"><span>8</span></li>
      <li id="number_8" class="list-inline-item numberCircle mx-2 my-1"><span>9</span></li>
      <li id="number_9" class="list-inline-item numberCircle mx-2 my-1"><span>10</span></li>
      <li class="list-inline-item labels mx-2 my-1"><span class="text-muted">jumping with joy</span></li>
   </ul>
</div>

新增类的作用说明：

• d-flex：将列表声明为Flex容器
• flex-wrap：空间不足时元素自动换行
• justify-content-center：整行元素水平居中
• align-items-center：同一行内的所有元素垂直居中
• mx-2 my-1：给每个列表项添加横向、纵向间距，避免元素拥挤

步骤2：优化数字圆形的居中效果

如果你的自定义.numberCircle类还没有做垂直居中适配，可以补充以下样式规则：

.numberCircle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 保留你原有样式：宽高、边框、圆角、背景色等 */
}

修改后不管是大屏展示还是小屏换行，所有列表项都会保持垂直居中对齐，符合响应式适配要求。

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