Bootstrap5按钮移动端并排居中问题：如何保持按钮同行显示？

你的问题根源在列的响应式类设置：当前代码里的col-md-4仅在屏幕宽度≥768px（中等屏幕及以上）时生效，移动端（<768px）下每个列容器默认占满整行（12列宽度），所以按钮会自动上下排列。

给你三种可行的修改方案：

方案一：添加移动端列类（推荐） #

直接给每个列容器加上col-6，让移动端下每个列占一半宽度，自然实现并排：

<div class="container">
    <div class="row justify-content-center">
        <div class="col-6 col-md-4 col-lg-3 text-center">
            <a href="#" style="font-size: 18px;" class="btn btn-primary btn-lg mb-3" role="button">Button 1</a>
        </div>  
        <div class="col-6 col-md-4 col-lg-3 text-center">
            <a href="#" style="font-size: 18px;" class="btn btn-primary btn-lg mb-3" role="button">Button 2</a>
        </div>
    </div> 
</div>

col-6对应最窄的移动端断点（<576px），保证小屏幕下两个按钮各占一半宽度；md和lg断点的列设置保持不变，不影响桌面端布局。

方案二：用弹性布局整合按钮 #

把两个按钮放在同一个居中的列容器里，借助Bootstrap的弹性布局类实现并排，结构更简洁：

<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-6 col-md-8 d-flex justify-content-center gap-3">
            <a href="#" style="font-size: 18px;" class="btn btn-primary btn-lg mb-3" role="button">Button 1</a>
            <a href="#" style="font-size: 18px;" class="btn btn-primary btn-lg mb-3" role="button">Button 2</a>
        </div>
    </div> 
</div>

• d-flex让容器内元素启用弹性布局
• justify-content-center保证按钮组整体居中
• gap-3给按钮之间添加合适间距（可根据需求调整为gap-2/gap-4）
• 外层列的col-lg-6 col-md-8可以根据需要调整宽度，确保不同屏幕下布局美观

方案三：强制列容器不换行 #

如果不想改动列的宽度设置，也可以给每个列容器加上d-inline-block类，强制它们在移动端不换行：

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-4 col-lg-3 text-center d-inline-block">
            <a href="#" style="font-size: 18px;" class="btn btn-primary btn-lg mb-3" role="button">Button 1</a>
        </div>  
        <div class="col-md-4 col-lg-3 text-center d-inline-block">
            <a href="#" style="font-size: 18px;" class="btn btn-primary btn-lg mb-3" role="button">Button 2</a>
        </div>
    </div> 
</div>

注意：这种方式要留意移动端按钮的宽度，如果按钮文本过长可能会挤在一起，可适当调整按钮尺寸（比如改用btn-md）或字体大小。

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