如何在Bootstrap中实现列表居中且左对齐排版

嘿，我来帮你搞定这个列表布局需求！你想要的是列表整体在页面居中，但每个列表项的文本左对齐且边缘整齐，对吧？

你当前的代码里，给<ul>加了text-center，<li>加了text-left，但问题在于<ul>默认是块级元素，会占满父容器的全部宽度，所以text-left只是让文本在满宽的容器里左对齐，没法让整个列表“收缩”到最长项的宽度后再居中。

这里有个简单的Bootstrap解决方案，只需要调整<ul>的类：

<ul class="d-inline-block mx-auto">
  <li> Short Item #1 </li>
  <li> Much Longer Item #2 </li>
  <li> Short Item #3 </li>
  <li> Much Much Longer Item #3 </li>
</ul>

原理说明： #

• d-inline-block：把<ul>从默认的块级元素改成行内块元素，这样它的宽度会自动适配内部最长的列表项，而不是占满整个页面宽度。
• mx-auto：这是Bootstrap的水平margin自动类，会给<ul>的左右加上自动margin，让它在父容器里水平居中。
• 至于<li>的text-left其实可以省略，因为列表项默认就是左对齐的，如果你需要明确指定也可以保留。

这样设置后，整个列表就会以最长项的宽度为基准，在页面中居中，同时所有列表项的文本都左对齐、边缘整齐，完全符合你想要的效果~

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