Bootstrap 5中inline-block元素因子元素数量不同错位问题求助

d-inline-block元素的默认垂直对齐方式是基线对齐（baseline），元素的基线会和父容器的基线对齐。当内部子元素数量不同时，元素的基线位置由内部最后一个元素的基线决定，子元素少的块基线位置更低，就会出现向下偏移的情况。

以下是几种适配Bootstrap 5的解决方法：

方法1：使用Bootstrap垂直对齐类 #

给每个d-inline-block元素添加align-top类，强制元素顶部对齐，这是最直接的Bootstrap原生方案：

<div class="container">
    <div class="d-inline-block align-top border border-primary" style="width:16%;height:15vh;">
        <div>thing1</div>
        <div>XXX</div>
    </div>
    <div class="d-inline-block align-top border border-success" style="width:16%;height:15vh;">
        <div>thing2</div>
    </div>
    <div class="d-inline-block align-top border border-primary" style="width:16%;height:15vh;">
        <div>thing3</div>
        <div>XXX</div>
    </div>
</div>

方法2：改用Flex布局 #

将外层容器改为d-flex布局，Flex默认会让子元素顶部对齐（也可以显式添加align-items-start类确保效果），这种方式更灵活，不需要依赖d-inline-block：

<div class="container d-flex">
    <div class="border border-primary" style="width:16%;height:15vh;">
        <div>thing1</div>
        <div>XXX</div>
    </div>
    <div class="border border-success" style="width:16%;height:15vh;">
        <div>thing2</div>
    </div>
    <div class="border border-primary" style="width:16%;height:15vh;">
        <div>thing3</div>
        <div>XXX</div>
    </div>
</div>

方法3：自定义CSS调整垂直对齐 #

如果不想用Bootstrap类，也可以直接给d-inline-block元素添加vertical-align: top;样式，达到和align-top类一样的效果：

<div class="container">
    <div class="d-inline-block border border-primary" style="width:16%;height:15vh;vertical-align: top;">
        <div>thing1</div>
        <div>XXX</div>
    </div>
    <div class="d-inline-block border border-success" style="width:16%;height:15vh;vertical-align: top;">
        <div>thing2</div>
    </div>
    <div class="d-inline-block border border-primary" style="width:16%;height:15vh;vertical-align: top;">
        <div>thing3</div>
        <div>XXX</div>
    </div>
</div>

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