Bootstrap 5中块级按钮无法并排显示的问题如何解决？

解决方案 #

你当前使用的d-grid默认是单列网格布局，因此按钮会垂直堆叠。只需给网格容器新增Bootstrap 5自带的grid-cols-2类，即可实现两个等宽块级按钮并排展示的效果，修改成本极低。

修改后的代码如下：

<div class="card">
    <div class="card-header">
        System-Test
    </div>

    <div class="card-body">
        <p>Hier kann das Verhalten der Anwendung getestet werden, insbesondere das Verhalten im Fehlerfall.</p>
        <!-- 仅新增grid-cols-2类即可完成调整 -->
        <div class="d-grid grid-cols-2 gap-2 col-6 mx-auto">
            <a class="btn btn-primary" href="/Admin/Control?command=TestException">Ausnahme testen</a>
            <a class="btn btn-primary" href="/Admin/Control?command=TestMessage">System-Nachricht testen</a>
        </div>
    </div>
</div>

如果需要做响应式适配，比如小尺寸屏幕下自动切回垂直堆叠效果，可以把grid-cols-2替换为grid-cols-1 grid-md-cols-2，即可实现中等及以上尺寸屏幕并排、小屏堆叠的适配效果。

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